CSS border-block-start-width Property
Description
The border-block-start-width property controls the thickness of the border on the block-start side of an element - in other words, the border edge that begins the block axis for that element. As a logical property, it does not refer to a fixed physical side (top, right, bottom, left); instead it maps to whichever physical edge corresponds to the element’s block-start in the current writing mode and block flow. Because of that logical mapping, changing writing direction or mode can cause the same declared value to affect a different physical edge without changing the property itself. See also writing-mode for the mechanism that determines which physical side is considered block-start.
In rendering, the value of border-block-start-width determines how much visual space the border occupies at that edge and therefore how prominent or subtle the separation between the element and its surroundings appears. However, a width value only becomes visible if the border’s corresponding style produces a drawn border; when the style is none (or otherwise non-drawing), the width has no visible effect. For interaction with the border’s appearance you can look up border-style, which controls whether or how a given width is actually painted.
From a layout and box-model perspective, the border width set by border-block-start-width contributes to the outer dimensions of the element: it occupies space outside the padding/content area and influences where adjacent content is placed. That means larger values can push neighboring boxes away and affect hit-testing and clipping. Background painting and clipping behavior also interacts with the presence and thickness of borders (for example, whether the background extends beneath the border depends on background-clip settings); see background-clip for details on those interactions.
In the cascade and shorthand system, border-block-start-width is a longhand that can be overridden by broader declarations and shorthands. It participates with other logical border longhands and shorthands: for example, shorthand properties that set block-side border widths can replace or derive values for the start side, and longhand declarations win or lose according to normal cascade, specificity, and origin rules. For grouping and shorthand behavior see the logical shorthand border-block-width and the overall border shorthand border, which are commonly used to set multiple border widths at once.
Definition
- 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
Block Start Width Property
Syntax
border-block-start-width: <border-width>
Values
- <border-width>Specifies the width of the border
Example
Browser Support
The following information will show you the current browser support for the CSS border-block-start-width property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
