CSS border-block-start-color Property

Sets the color of the border at the beginning of the block dimension of an element.

selector { border-block-start-color: #ff0000; }

<color>	Specifies any valid CSS color value like hex, rgb, or named colors.
transparent	Sets the color to be fully transparent, effectively hiding the border line while maintaining its space.
currentcolor	Uses the computed value of the element's color property for the border.

Code Examples

A basic example showing a thick orange border applied to the block-start edge of a div.

<div style="border-block-start-width: 10px; border-block-start-style: solid; border-block-start-color: #ff9900; padding: 20px;">This div uses a logical property to color the top border in standard English layouts.</div>

An advanced example using JavaScript to toggle between horizontal and vertical writing modes, showing how the logical border color follows the start of the block flow.

<div id="ui-box" style="border-block-start: 8px solid; border-block-start-color: #4caf50; padding: 20px; writing-mode: horizontal-tb; background: #f4f4f4;">Interactive logical border color example.</div>
<button onclick="toggleDirection()">Toggle Writing Mode</button>
<script>
function toggleDirection() {
  const el = document.getElementById("ui-box");
  const isHorizontal = el.style.writingMode === "horizontal-tb";
  el.style.writingMode = isHorizontal ? "vertical-rl" : "horizontal-tb";
  el.style.borderBlockStartColor = isHorizontal ? "#f44336" : "#4caf50";
}
</script>

Pro Tip

You can use the keyword "currentcolor" to make the border automatically match the color of the text within that element. This is a great way to create themed UI components that adapt dynamically to color changes without needing extra CSS rules.

Deep Dive

Think of logical properties like a GPS for your layout. Instead of saying "the north wall of the house," you say "the wall where the front door is." If the house rotates, the front door wall moves. In a standard English layout, the block-start is the top edge. In a vertical writing mode, like some East Asian languages, that edge might rotate to the right side. This property targets that dynamic edge so your design remains consistent across different languages and text directions without you having to manually re-code for "top" or "right."

Best Practices

Use this property whenever you are building layouts meant for global audiences. It ensures your borders follow the flow of the language. Always pair this with a defined border-block-start-style, because if the style is "none," the color will not be visible on the screen.

Common Pitfalls

A common mistake is forgetting that the border-width and border-style must also be defined for the color to appear. Also, don't confuse "block" with "inline." The block dimension is the direction in which elements stack on top of each other, while the inline dimension is the direction in which text flows within a line.

Accessibility

Ensure that the color you choose has a high enough contrast ratio against the element's background. If the border is used to indicate focus or a state change, users with visual impairments must be able to distinguish the border color from the surrounding elements.

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

default	currentcolor
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.borderBlockStartColor = "#ff0000";
js_syntax_2	element.style.setProperty("border-block-start-color", "#ff0000");
js_note	In JavaScript, use camelCase for the property name on the style object or the hyphenated string when using setProperty().
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 }