CSS border-block-start-width Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-block-start-width CSS property determines the width or thickness of the border on the "start" side of a block-level element, where the start side depends on the text direction (left in LTR languages like English, right in RTL languages like Arabic). It is particularly useful for creating complex and responsive layouts, allowing precise control over the border thickness on specific sides of an element, helping to achieve desired visual effects and alignment in various writing modes and language directions.

Initial value: medium
Applies to: all elements
Inherited: no
Computed value: absolute length; 0 if the border style is none or hidden
Animatable: by computed value type
JavaScript syntax: object.style.borderBlockStartWidth

Interactive Demo

border-block-start-width: 5px;
writing-mode: horizontal-tb;

border-block-start-width: 1rem;
writing-mode: vertical-rl;

border-block-start-width: thin;
writing-mode: horizontal-tb;

border-block-start-width: thick;
writing-mode: vertical-lr;

Example of the Border
Block Start Width Property

Syntax

border-block-start-width: <border-width>

Values

<border-width>Specifies the width of the border

Example

HTML

<div class="box">

  This is a box with a border.

</div>

CSS

.box {
  border-block: 5px dashed;
  border-block-color: green;
  border-block-start-width: 5px;
  border-block-start-color: red;
  border-block-start-style: dashed;
  writing-mode: vertical-rl;
}

Result

Editor