CSS border-block-start-width Property

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

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

<div class="box">
This is a box with a border.
</div>
.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;
}

Browser Support

The following table will show you the current browser support for the CSS border-block-start-width property.

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 1st January 2024