CSS border-inline-end-color Property

Definition and Usage

The border-inline-end-color property sets the color of the logical inline-end border. It maps to a physical side based on writing-mode, direction, and text-orientation.

In default horizontal LTR text it acts like border-right-color. In RTL it usually colors the left edge. It only sets color — you still need a visible border-inline-end-style and width. It applies to all elements and is not inherited. The initial value is currentColor.

CSS Syntax

Any valid CSS color works: named colors, hex, rgb(), hsl(), currentColor, and transparent. The initial value is currentColor.

Property Values

How to Use border-inline-end-color

Give the inline-end edge a visible line first, then set its color.

1. Set a visible border-inline-end-style such as solid.
2. Set border-inline-end-width to a size larger than 0.
3. Set border-inline-end-color to the color you want.
4. Or use the border-inline-end shorthand for width, style, and color in one line.

Live Preview

Width and style stay the same. Only border-inline-end-color changes.

CSS Examples

Each snippet shows only what you need for the color: a width, a style, and border-inline-end-color. Use Try It Yourself for a live editor.

<style>
  p {
    border-inline-end-width: 4px;
    border-inline-end-style: solid;
    border-inline-end-color: blue;
  }
</style>

<p>Inline end</p>

<style>
  p {
    color: #7c3aed;
    border-inline-end-width: 4px;
    border-inline-end-style: solid;
    border-inline-end-color: currentColor;
  }
</style>

<p>Inline end</p>

<style>
  p {
    direction: rtl;
    border-inline-end-width: 4px;
    border-inline-end-style: solid;
    border-inline-end-color: blue;
  }
</style>

<p>Inline end</p>

Key Takeaways