CSS Portal

CSS border-block-start-width Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

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="wrap">
<div class="card">
<h2>Card Title</h2>
<p>This box uses <code>border-block-start-width</code>.</p>
</div>
<div class="card vertical">
<h2>Vertical</h2>
<p>Writing mode <code>vertical-rl</code> - block start appears on the left.</p>
</div>
</div>
/* Basic layout */
.wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background: #fffdf6;
}

/* Card styles demonstrating border-block-start-width */
.card {
  width: 260px;
  padding: 16px;
  border-block-start-width: 8px;
  border-block-start-style: solid;
  border-block-start-color: #2b7a78;
  border-radius: 6px;
  background: #f7fff7;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.card h2 {
  margin: 0 0 8px 0;
  font-size: 1rem;
}

.card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Vertical writing mode example: block-start becomes the left side in vertical-rl */
.card.vertical {
  writing-mode: vertical-rl;
  height: 180px;
  width: 140px;
}

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
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!