CSS border-block-color Property

The border-block-color property sets the color of an element's logical block borders, adapting to the writing mode and direction of the content.

selector { border-block-color: color | color color; }

<color>	Sets the color of the block borders using any valid CSS color value.
transparent	Makes the block borders invisible while maintaining their space.
currentcolor	Inherits the color value from the element's text color.

Code Examples

A basic example demonstrating how to apply a uniform color to the logical block borders of a div.

<div style="border-block-style: solid; border-block-width: 10px; border-block-color: #e67e22; padding: 20px;">This element uses logical properties to set a burnt orange color for the top and bottom borders.</div>

An advanced example using two colors for start and end borders with a JavaScript function to dynamically update them.

<div id="box" style="border-block-style: dashed; border-block-width: 5px; border-block-color: #2ecc71 #9b59b6; padding: 20px; transition: border-block-color 0.5s;">Dynamic Logical Borders</div>
<button onclick="changeColors()">Swap Colors</button>
<script>
function changeColors() {
  const box = document.getElementById("box");
  box.style.borderBlockColor = "#f1c40f #e74c3c";
}
</script>

Pro Tip

You can style the top and bottom borders differently in one line by passing two values. For example, border-block-color: #ff0000 #000000; will give you a red border at the start and a black one at the end. This is a great way to create a unique layered look with very little code.

Deep Dive

Think of this property like a flexible frame that moves with your text flow. In a standard English layout, your block borders are the top and bottom edges. If you rotate your text for a vertical layout, those same borders now appear on the left and right. Using logical properties like this ensures that your design stays intact even if your website is translated into languages that read vertically. It acts as a shorthand for border-block-start-color and border-block-end-color, allowing you to set both at once or define them individually in a single declaration.

Best Practices

Always use logical properties like border-block-color when you're building layouts that might be localized for different languages. It saves you the headache of rewriting specific top or bottom rules for vertical writing modes. Use it alongside border-block-style and border-block-width to ensure the borders are actually visible.

Common Pitfalls

A common mistake is forgetting that the border won't show up unless you've also set a border-block-style. If your style is set to none, the color won't do anything. Also, keep in mind that if you provide two colors, the first applies to the start and the second applies to the end of the block dimension.

Accessibility

Borders are often used as visual cues to separate content or indicate a focused element. Make sure your border color provides enough contrast against your background. If a user can't see the border, they might miss where one piece of content ends and another begins.

Dev Data Table: border-block-color property

default	currentcolor
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.borderBlockColor = "#3498db";
js_syntax_2	element.style.setProperty("border-block-color", "#3498db");
js_note	Targeting logical properties in JavaScript is useful for dynamic themes that need to respect content flow and writing modes.
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 }