CSS border-block-start-width Property

This property defines the thickness of the border on the start edge of an element's block dimension.

selector { border-block-start-width: value; }

thin	Sets a thin border width, typically 1px in most browsers.
medium	The default width value, typically 3px.
thick	Sets a thick border width, typically 5px.
<length>	Specifies a custom thickness using units like px, rem, or em.

Code Examples

A basic example showing how to apply a thick starting block border to a standard div.

<div style="border-block-start-width: 8px; border-block-start-style: solid; border-block-start-color: #ff5733; padding: 10px;">This box has a thick 8px border on the block-start edge.</div>

Advanced example using JavaScript to toggle the writing mode, demonstrating how the logical border moves from the top to the right side.

<div id="uiBox" style="writing-mode: horizontal-tb; border-block-start-style: solid; border-block-start-color: #000000; padding: 20px;">Toggle the writing mode to see the border move.</div>
<button onclick="toggleMode()">Switch Writing Mode</button>
<script>
function toggleMode() {
  const el = document.getElementById("uiBox");
  el.style.writingMode = el.style.writingMode === "horizontal-tb" ? "vertical-rl" : "horizontal-tb";
  el.style.borderBlockStartWidth = "15px";
}
</script>

Pro Tip

If you want to keep your UI consistent, use a CSS variable for your border widths. This allows you to update the thickness of every starting block border across your entire application by changing just one value in the :root selector.

Deep Dive

In standard English layouts, this property acts exactly like border-top-width. However, think of it as a logical direction rather than a physical one. If you change the writing-mode of your document to something like vertical-rl (vertical right-to-left), the start of the block dimension rotates. The border will then appear on the right side instead of the top. This ensures your design adapts automatically to different languages or orientations without you having to manually remap every top, bottom, left, and right property in your stylesheet.

Best Practices

Use this property when building international websites that support multiple writing directions. It is cleaner than using physical properties like border-top-width because it handles the heavy lifting of layout orientation for you. Always ensure you have a border-block-start-style defined, otherwise the width will have no visible effect.

Common Pitfalls

The biggest mistake is setting a width and wondering why the border is invisible. You must also set a style like solid or dashed. Another point of confusion is mixing logical and physical properties; if you define both border-top-width and border-block-start-width, the one with higher specificity or the one declared last in the cascade will win.

Accessibility

Borders help define the structure and hit areas of elements. Use a width that is clearly visible to users with low vision. Avoid making borders so thin that they disappear on low-resolution screens or under high-contrast system settings.

Dev Data Table: border-block-start-width property

default	medium
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	document.getElementById("myBox").style.borderBlockStartWidth = "10px";
js_syntax_2	document.getElementById("myBox").style.setProperty("border-block-start-width", "10px");
js_note	When using JavaScript to set this value, remember it is sensitive to the writing-mode of the element.
browsers	{ "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }