CSS 'border-inline-color' Property Explained

The CSS 'border-inline-color' property specifies the color of the borders on the inline start and inline end sides of an element. This property is part of the CSS Logical Properties, which aim to provide more intuitive styling in contexts sensitive to the writing direction of the content. It enables the customization of border colors to match design requirements while ensuring compatibility with various writing modes.

CSS 'border-inline-color' Property Examples

See the Pen CSS 'border-inline-color' Property by Webzstore (@webzstore) on CodePen.

The 'border-inline-color' property supports the creation of designs that are both aesthetically pleasing and functionally adaptable to various writing modes, ensuring that web content remains accessible and consistent across different language and script contexts.

Browser Support For 'border-inline-color' Property

66.0	14.1	87.0	87.0	73.0

CSS Syntax of the 'border-inline-color' Property

border-inline-color: <color>{1,2};

border-inline-color: red;          /* inline-start and inline-end both red */
border-inline-color: red blue;     /* inline-start red, inline-end blue */

• A single color value applies to both the inline start and inline end borders.
• Two color values specify the inline start and inline end border colors, respectively.
• A border is only drawn when its style is not none, so combine this property with a border style (for example border-inline-style: solid).

Usage of the 'border-inline-color' Property

Use 'border-inline-color' to set or change the color of an element's inline-start and inline-end borders, separate from the block-start and block-end borders (border-block-color). Which physical sides those are depends on writing-mode and direction. With writing-mode: horizontal-tb and direction: ltr (the default for English), the inline borders are the left (inline-start) and right (inline-end) borders, and the block borders are the top and bottom. With direction: rtl the inline-start border is the right one. In vertical writing modes such as vertical-lr, the inline borders are the top and bottom borders instead. This is useful in designs that must adapt to different languages and scripts, including right-to-left and vertical text.

Property Values of the 'border-inline-color' Property

• Color: Sets the color of the inline borders using any standard CSS color value, such as named colors, HEX codes, RGB(a), and HSL(a).
• Initial: Resets the 'border-inline-color' to its default value (currentcolor, the element's text color).
• Inherit: Inherits the 'border-inline-color' from the parent element.