CSS border-inline-color Property

The CSS property border-inline-color controls the color applied to an element’s inline-axis borders - that is, the borders that lie on the inline-start and inline-end edges of the box. As a logical property, it abstracts away physical directions (left/right) so authors can set the inline-edge color without worrying about writing direction. This makes it especially useful in multi-lingual or rotated layouts where the inline axis may not correspond to the left/right edges of the screen.

Because it’s a logical shorthand for the two inline-edge colors, the value of border-inline-color maps onto the more specific properties for each inline edge (for example, border-inline-start-color and border-inline-end-color). How those inline edges correspond to physical sides depends on the element’s text orientation and direction settings (see writing-mode and direction). Changing the writing mode or direction can therefore change which physical sides are affected, without changing the logical declaration.

In the cascade, border-inline-color participates alongside other border properties: a more specific per-edge property or a later declaration of the shorthand border-color (or the overall border-style and width declarations) can override it. Its computed color is often resolved relative to the element’s foreground color, so it commonly interacts with the text color used on the element. Note that a border will only be visible if a non-none border style and a non-zero border width are present.

Practically, authors use border-inline-color to make layouts and components adapt to different writing systems and directions without duplicating rules for left/right. It’s useful in theming and dynamic UIs where swapping themes or flipping text direction should change which sides receive a particular border color automatically. Because it targets only color, it’s also convenient when you want to animate or transition border hues independently of side-specific widths or styles and when you want a clear separation between color and other border characteristics.