CSS border-block-end Property

This is a logical shorthand property that sets the width, style, and color of an element's border at the end of its block axis. It automatically adjusts its position based on the element's writing mode and direction.

selector { border-block-end: <border-width> <border-style> <color>; }
<border-width> Sets the thickness of the border using length units like px or keywords like thin, medium, or thick.
<border-style> Defines the line type of the border, such as solid, dashed, dotted, or double.
<color> Specifies the color of the border using hex, RGB, HSL, or named color keywords.

Code Examples

A basic example showing a solid dark grey border at the logical bottom of a standard horizontal container.

<div style="border-block-end: 4px solid #333333; padding: 10px;">
  This element has a logical border at the end of its block axis.
</div>

Advanced example demonstrating how the border moves from the bottom to the left/right when the writing mode is toggled via JavaScript.

<div id="content" style="writing-mode: horizontal-tb; border-block-end: 5px dashed #007bff; padding: 20px;">
  <p>Toggle the writing mode to see the border move logically.</p>
  <button onclick="toggleDirection()">Toggle Writing Mode</button>
</div>

<script>
function toggleDirection() {
  const el = document.getElementById("content");
  if (el.style.writingMode === "horizontal-tb") {
    el.style.writingMode = "vertical-rl";
    el.style.borderBlockEnd = "5px dashed #ff8800";
  } else {
    el.style.writingMode = "horizontal-tb";
    el.style.borderBlockEnd = "5px dashed #007bff";
  }
}
</script>

Pro Tip

You can use this property to create responsive underlines for headings that adapt to the text flow. Instead of using text-decoration, a border-block-end gives you much more control over the thickness and spacing (via padding) while remaining logically aware of the text direction.

Deep Dive

Think of logical properties like directions on a moving ship. Instead of saying "South," which is a fixed physical direction (like "bottom"), we say "Aft" or "Stern." In a standard horizontal writing mode (top-to-bottom), "border-block-end" behaves exactly like "border-bottom." However, if you rotate the writing mode to vertical, the "block-end" moves to the left or right side of the element. This property is a shorthand for three sub-properties: border-block-end-width, border-block-end-style, and border-block-end-color. It allows you to write cleaner code that is ready for international audiences without having to manually swap "border-bottom" for "border-left" when the language direction changes.

Best Practices

Use this property whenever you are building layouts that might be translated into languages with different writing directions, such as Arabic or Japanese. It ensures your decorative lines or separators stay at the logical "end" of a text block. Always provide all three values (width, style, color) in the shorthand to avoid unexpected default behaviors.

Common Pitfalls

The most common mistake is assuming this will always be a bottom border. If your writing-mode is set to "vertical-rl" or "vertical-lr", that border is going to end up on the side. Also, if you only define one value, the others will reset to their initial defaults, which might make your border disappear if the default style is "none".

Accessibility

Borders often serve as visual cues to separate content. Ensure that the color you choose for your border-block-end has a high enough contrast ratio against the background. Users with visual impairments rely on these visual boundaries to distinguish between different sections of your interface.

Dev Data Table: border-block-end property

default medium none currentcolor
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2021
js_syntax_1 element.style.borderBlockEnd = "5px solid #ff0000";
js_syntax_2 element.style.setProperty("border-block-end", "5px solid #ff0000");
js_note When manipulating logical properties in JavaScript, remember that the property name is camelCased and the values are strings containing the width, style, and color.
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 }
results render here...