CSS border-block-width Property

Sets the border thickness for the start and end sides of an element in the block dimension.

selector { border-block-width: value; }

thin	Sets a thin border width.
medium	Sets a medium border width.
thick	Sets a thick border width.
<length>	Defines the thickness using specific units like px, em, or rem.

Code Examples

A basic example showing 10px borders applied to the top and bottom of a standard horizontal container.

<div style="border-block-style: solid; border-block-width: 10px; border-block-color: #ff0000; padding: 20px;">
  This box has 10px borders on the block-start and block-end sides.
</div>

An advanced example using JavaScript to toggle writing modes and dynamically update the logical border thickness.

<div id="box" style="border-block-style: solid; border-block-width: 2px; border-block-color: #000000; padding: 20px; writing-mode: horizontal-tb;">
  Toggle the writing mode to see how the logical border shifts.
</div>
<button onclick="toggleMode()">Toggle Writing Mode</button>

<script>
function toggleMode() {
  const el = document.getElementById("box");
  if (el.style.writingMode === "horizontal-tb") {
    el.style.writingMode = "vertical-rl";
    el.style.borderBlockWidth = "15px";
  } else {
    el.style.writingMode = "horizontal-tb";
    el.style.borderBlockWidth = "2px";
  }
}
</script>

Pro Tip

You can use this property to quickly clear or set vertical spacing in a standard layout without affecting the side borders. It keeps your CSS cleaner and more semantic than setting border-top and border-bottom separately.

Deep Dive

This property is a logical shorthand that targets the border-block-start-width and border-block-end-width simultaneously. Think of the block dimension as the direction in which new blocks of text flow, like paragraphs stacking on a page. In standard horizontal writing modes, this maps to the top and bottom borders. If you flip the writing mode to vertical, the block dimension rotates, and this property would then control the left and right borders. It allows your design to adapt automatically to different languages without you having to hard-code physical sides like top or bottom.

Best Practices

Use logical properties like this one if you are developing for a global audience. It ensures your layout remains consistent whether the user is reading English, Arabic, or Japanese. Always pair this with a border-block-style, otherwise the width will have no visual effect.

Common Pitfalls

The most common mistake is forgetting that borders are invisible by default. If you set a width but don't set a style like solid or dashed, you won't see anything. Also, keep in mind that if you mix logical and physical properties, the last one declared in the CSS will usually override the previous ones due to the cascade.

Accessibility

Borders help define the boundaries of interactive elements. Ensure your border-block-width is thick enough to be visible for users with low vision, and maintain high contrast between the border color and the background.

Dev Data Table: border-block-width property

default	medium
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.borderBlockWidth = "5px";
js_syntax_2	element.style.setProperty("border-block-width", "10px");
js_note	When manipulating logical properties via JavaScript, remember that the browser computes these values based on the current 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 }