border-inline-end-color

Definition

The border-inline-end-color CSS property defines the color of the logical inline-end border 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, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Examples

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

p {
  border-inline-end-color: red;
}

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

span {
  border-inline-end-color: blue;
}

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

div {
  border-inline-end-color: green;
}

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

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

Values

Best Practices

• Use the border-inline-end-color property to set the color of an element's inline end border.
• Use a valid CSS color value as the value for the border-inline-end-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 end border transparent, or the inherit keyword to inherit the color value from the parent element.
• Be aware that the border-inline-end-color property is part of the CSS Logical Properties and Values module, which is not yet widely supported in modern browsers. Instead, you can use the border-right-color property to set the color of the right border in horizontal writing modes, or the border-top-color property to set the color of the top border in vertical writing modes.
• Use the border-inline-end-color property in combination with other border properties, such as border-inline-end-style and border-inline-end-width, to create more complex inline end border styles.
• When using the border-inline-end-color property, make sure to test your inline end border styles on different screen sizes and resolutions to ensure that the border looks good on all devices.

Browser Compatibiility

The border-inline-end-color property is part of the CSS Logical Properties and Values module, which is not yet widely supported in modern browsers. As of January 2021, the property 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-end-color property, you can use the border-right-color property to set the color of the right border in horizontal writing modes, or the border-top-color property to set the color of the top border in vertical writing modes. These properties are supported in all modern browsers.