CSS border-inline-start-color Property

This property defines the color of the logical inline-start border of an element, which maps to a physical border color based on the element's writing mode and directionality.

selector { border-inline-start-color: value; }

<color>	Sets the color using a valid name, hex code, RGB, RGBA, HSL, or HSLA value.
transparent	Makes the border invisible by setting the color to fully transparent.
currentcolor	Uses the computed value of the element's color property for the border.

Code Examples

A basic example showing a thick solid orange border on the logical starting side of a div.

<div style="border-inline-start-style: solid; border-inline-start-width: 10px; border-inline-start-color: #ff8c00; padding: 20px;">This box has a logical orange border on its starting edge.</div>

An advanced example using a right-to-left direction and JavaScript to dynamically update the logical border color.

<div id="uiBox" style="border-inline-start: 5px solid #333333; padding: 20px; direction: rtl;">Click me to change the logical border color.</div>
<script>
const uiBox = document.getElementById("uiBox");
uiBox.addEventListener("click", () => {
  uiBox.style.borderInlineStartColor = "#00ff00";
});
</script>

Pro Tip

You can use "currentcolor" to keep your borders in sync with your text color automatically. If you change the text color for a dark mode theme, the border color will update itself without you having to touch another line of CSS. It is a great way to maintain design consistency with less effort.

Deep Dive

In the world of the modern web, we deal with more than just English. While a property like "border-left-color" is physically locked to the left side of your screen, "border-inline-start-color" is smarter. It is a logical property that acts like a GPS for your UI. If your text direction is left-to-right (LTR), it colors the left border. If you switch to a right-to-left (RTL) language like Arabic or Hebrew, the color automatically flips to the right border. This allows you to write one piece of CSS that works globally without having to constantly redefine borders for different localized layouts. It respects the flow of the document rather than the physical edges of the device.

Best Practices

Always use logical properties like this one instead of physical properties like "border-left-color" if you plan on translating your site into multiple languages. It keeps your codebase clean and prevents the need for RTL-specific style overrides. Also, ensure you have set a "border-inline-start-style" value, otherwise the color will not be visible.

Common Pitfalls

The most common mistake is thinking the color will show up on its own. Just like painting a wall, the wall has to exist first. If the "border-inline-start-style" is set to "none" or "hidden", which is the default, your color will never appear. Another thing to remember is that this property only affects the "start" side; if you want the "end" side colored, you need "border-inline-end-color".

Accessibility

Contrast is king. When choosing a color, make sure it stands out enough against the background so users with visual impairments can distinguish the element boundaries. If the border is used as a status indicator—like a green line for success—don't rely on color alone; use text or icons to ensure the message is clear to everyone.

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

default	currentcolor
animatable	yes
inherited	no
experimental	no
year_intro	2015
year_standard	2021
js_syntax_1	element.style.borderInlineStartColor
js_syntax_2	element.style.setProperty("border-inline-start-color", "#ff0000")
js_note	When manipulating this property in JavaScript, use camelCase for the style object or the hyphenated string for 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 }