border-inline-color

Definition

The border-inline-color CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Examples

Set the color of the inline border for all p elements to red

p {
  border-inline-color: red;
}

Set the color of the inline border for all span elements to blue

span {
  border-inline-color: blue;
}

Set the color of the inline border for all div elements to green

div {
  border-inline-color: green;
}

Set the color of the inline border for all elements with the class "highlight" to yellow

.highlight {
  border-inline-color: yellow;
}

Values

Best Practices

• Use the border-inline-color property to set the color of an element's inline border.
• Use a valid CSS color value as the value for the border-inline-color property. This can be a named color, a hexadecimal value, an RGB value, an RGBA value, an HSL value, or an HSLA value.
• Use the transparent keyword to make the inline border transparent, or the inherit keyword to inherit the color value from the parent element.
• Be aware that the border-inline-color property is not widely supported in modern browsers. Instead, you can use the border-color property to set the color of all of an element's borders (including the inline border), or use the border-top-color, border-right-color, border-bottom-color, and border-left-color properties to set the color of specific borders.
• Use the border-inline-color property in combination with other border properties, such as border-inline-style and border-inline-width, to create more complex inline border styles.
• When using the border-inline-color property, make sure to test your inline border styles on different screen sizes and resolutions to ensure that the border looks good on all devices.

Browser Compatibility

The border-inline-color property is not widely supported in modern browsers. It is not listed in the official CSS specifications, and it is not supported by any version of Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox, Apple Safari, or Opera.

Instead of using the border-inline-color property, you can use the border-color property to set the color of all of an element's borders (including the inline border), or use the border-top-color, border-right-color, border-bottom-color, and border-left-color properties to set the color of specific borders. These properties are supported in all modern browsers.