CSS border-inline-end-color Property
Description
The border-inline-end-color property controls the color used to paint the border on an element’s inline-end edge - that is, the end side of the inline axis for the box. Because it is a logical property, its meaning depends on an element’s text-progression and writing direction rather than a fixed physical edge; this makes it useful when styling layouts that must adapt to different writing modes or right-to-left languages. The property only affects the color; whether that border is actually visible depends on the element’s border style and width.
Which physical edge the inline end corresponds to is determined by layout orientation and text direction. The mapping is driven by the document’s writing mode and base direction, so the same rule can target different physical sides in different contexts; for example the inline end can correspond to the physical right edge in a left-to-right horizontal flow, but to the left edge in a right-to-left context. These mappings follow the values of writing-mode and direction, enabling styles that automatically adapt without needing separate left/right rules.
In the cascade and shorthand model, border-inline-end-color participates alongside other border color properties. It will interact with the overall border-color shorthand and with its logical counterpart border-inline-start-color; more specific longhands take precedence over broader shorthands according to normal cascade rules. Note that the color you set will only be painted when the corresponding border side has a visible style and width - properties such as border-style and border-width determine whether the border is drawn at all.
Practically, using border-inline-end-color simplifies theming and internationalization because you can set logical-edge styling once and have it apply correctly across different writing systems and directions. It also helps keep CSS concise when combined with other logical properties for borders and padding, avoiding duplication of left/right rules. Finally, because it targets only the inline-end edge’s color, it is often used in combination with the corresponding start color and with overall border settings to achieve consistent multi-directional designs.
Definition
- Initial value
- currentcolor
- Applies to
- all elements
- Inherited
- no
- Computed value
- computed color
- Animatable
- by computed value type
- JavaScript syntax
- object.style.borderInlineEndColor
Interactive Demo
Inline End Color Property
Syntax
border-inline-end-color: <color>
Values
- <color>Specifies the color of the border
Example
Browser Support
The following information will show you the current browser support for the CSS border-inline-end-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
