CSS border-inline-color Property

This property sets the color of the logical inline start and end borders of an element.

selector { border-inline-color: value; }

<color>	Defines the color of the inline borders using keywords, hex, RGB, HSL, or LCH values.
currentcolor	Sets the border color to match the text color of the element.
transparent	Makes the inline borders invisible while maintaining their width.

Code Examples

A basic example showing how to apply a hex color to the inline borders of a div.

<div style="border-inline-style: solid; border-inline-width: 10px; border-inline-color: #ff5722; padding: 20px;">
  This box has logical inline borders colored orange.
</div>

An advanced example using two different colors for the start and end borders, plus a JavaScript function to update them dynamically.

<div id="box" style="border-inline-style: double; border-inline-width: 8px; border-inline-color: #4caf50 #2196f3; padding: 20px; transition: border-inline-color 0.5s;">
  Dynamic logical borders.
</div>
<button onclick="changeColor()">Change Color</button>

<script>
function changeColor() {
  const box = document.getElementById("box");
  box.style.borderInlineColor = "#9c27b0 #ffeb3b";
}
</script>

Pro Tip

You can pass two colors to this property at once. The first color applies to the start side and the second to the end side. This is a quick way to create asymmetrical designs without writing two separate lines of CSS.

Deep Dive

Think of border-inline-color as a smart way to color the side walls of your content box. Instead of hardcoding left and right, which can break when you flip your site for Middle Eastern or Asian languages, this property follows the flow of the text. In a standard English layout, it colors the left and right borders. If the writing mode is vertical, it automatically colors the top and bottom. It is a shorthand for border-inline-start-color and border-inline-end-color. You can provide one value to color both sides, or two values to color the start and end differently.

Best Practices

Use this property when building layouts that need to be multi-directional. It saves you from writing media queries or extra classes to flip border-left and border-right when switching from Left-to-Right to Right-to-Left layouts. Always pair it with border-inline-style, otherwise the color will not be visible.

Common Pitfalls

The most common mistake is forgetting that borders have a default style of none. If you do not define a border-inline-style, your color will never show up. Also, keep in mind that this property only affects the inline dimension; it won't touch the top or bottom borders in a standard horizontal layout.

Accessibility

Ensure that the color you choose has enough contrast against the background so users with visual impairments can clearly see the boundaries of the element. Use tools like the WCAG contrast checker to verify your color choices.

Dev Data Table: border-inline-color property

default	currentcolor
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.borderInlineColor = "#ff0000";
js_syntax_2	element.style.setProperty("border-inline-color", "#ff0000");
js_note	In JavaScript, use the camelCase version borderInlineColor when accessing the style object directly.
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 }