CSS border-block-end-color Property

Defines the color of the logical block-end border of an element, which maps to a physical border color based on the writing mode and direction.

selector { border-block-end-color: value; }

<color>	Defines the color using keywords, hex, RGB, RGBA, HSL, or HSLA values.
transparent	Sets the border color to be fully see-through.
currentcolor	Sets the border color to match the computed value of the element's color property.

Code Examples

A basic example showing how the logical block-end acts as a bottom border in a default horizontal writing mode.

<div style="border-block-end-width: 5px; border-block-end-style: solid; border-block-end-color: #ff0000; padding: 10px;">Standard bottom border in horizontal layout.</div>

Advanced example demonstrating how the border moves to the left in a vertical writing mode, with a JavaScript function to dynamically update the color.

<div id="box" style="writing-mode: vertical-rl; border-block-end-width: 10px; border-block-end-style: double; border-block-end-color: #0000ff; padding: 20px;">Vertical flow makes this a left border.</div><button onclick="changeColor()">Change Color</button><script>function changeColor(){ document.getElementById("box").style.borderBlockEndColor = "#00ff00"; }</script>

Pro Tip

If you want the border to always match the text color, use the currentcolor keyword. This is a great way to keep your design synchronized without having to update multiple color values when you decide to change the theme of your application.

Deep Dive

Think of logical properties like a compass rather than a fixed map. In a standard top-to-bottom English layout, the block-end is the bottom. If you rotate the writing mode to vertical-rl for a different language, the block-end shifts to the left side. This property allows your UI to be fluid and adapt to different languages without you having to write specific CSS for every possible orientation. It targets the trailing edge of the block dimension, ensuring your decorative or structural borders follow the flow of the content content naturally.

Best Practices

Use logical properties like border-block-end-color instead of physical properties like border-bottom-color when building layouts intended for an international audience. This ensures that when the writing-mode changes, your styling logic remains intact without requiring manual overrides for every direction.

Common Pitfalls

The most common mistake is forgetting that the border color is invisible if the border-block-end-style is not defined or is set to none. Just like standard borders, you need a style and a width for the color to actually show up on the screen.

Accessibility

Always ensure the color you choose has a high enough contrast ratio against the element's background. Borders are often used to define the boundaries of interactive elements, and poor contrast can make it difficult for users with visual impairments to navigate your site.

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

default	currentcolor
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.borderBlockEndColor = "#ff0000";
js_syntax_2	element.style.setProperty("border-block-end-color", "#ff0000");
js_note	When using the style object in JavaScript, use camelCase for the property name.
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 }