CSS border-block-end-width Property

This property defines the thickness of an element's border at the end of its block dimension.

selector { border-block-end-width: value; }
thin Sets a thin border width based on the browser's default.
medium Sets a medium border width, which is the default value.
thick Sets a thick border width.
<length> Specifies a fixed thickness using standard CSS units like px, em, or rem.

Code Examples

A basic example showing a 10px solid green border applied to the logical end of a standard block element.

<div style="border-block-end-width: 10px; border-block-end-style: solid; border-block-end-color: #2ecc71; padding: 20px;">
  This box has a thick green border at the end of its block flow.
</div>

An advanced example using JavaScript to toggle between horizontal and vertical writing modes, demonstrating how the logical border width adapts and changes size dynamically.

<div id="demoBox" style="writing-mode: horizontal-tb; border-block-end-width: 5px; border-block-end-style: dashed; border-block-end-color: #3498db; padding: 20px; margin-bottom: 10px;">
  Watch my border position change when you toggle the writing mode.
</div>
<button onclick="toggleMode()">Toggle Writing Mode</button>

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

Pro Tip

You can use this property in combination with CSS variables to create a global theme that automatically adjusts border thickness for specific UI components across different writing modes with a single line of code.

Deep Dive

Think of the block dimension as the direction content flows, like stacking boxes in a room. In a standard top-to-bottom layout, the block-end is the floor. If you rotate the room so content flows sideways, the floor moves with it. This is a logical property, meaning it is smarter than the physical border-bottom-width. It looks at the writing-mode of your document. If you are using a standard horizontal layout, it affects the bottom border. If you switch to a vertical writing mode, it automatically shifts to the left or right side depending on the text direction. This keeps your layout consistent across different languages without you having to manually reassign border-bottom or border-right styles.

Best Practices

Use this property when you are building international applications that need to support Right-to-Left (RTL) or vertical text. It ensures that your decorative or structural borders stay at the end of the content flow regardless of how the text is oriented.

Common Pitfalls

A common mistake is forgetting to set the border-block-end-style. By default, the style is none. If you do not give it a style like solid or dashed, the width will not show up. It is like trying to change the thickness of a ghost; if there is no visible line, the width does not matter.

Accessibility

Borders act as visual markers that help users understand where one element ends and another begins. Ensure that the color you choose for your border has enough contrast against the background so users with low vision can clearly see the boundary.

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

default medium
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.borderBlockEndWidth
js_syntax_2 element.style.setProperty("border-block-end-width", "10px")
js_note In JavaScript, the property is camelCased when accessed via the style object, or you can use the hyphenated string within the setProperty method.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }
results render here...