CSS border-inline-start-color Property

Definition and Usage

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

In default horizontal LTR text it acts like border-left-color. In RTL it usually colors the right edge. It only sets color — you still need a visible border-inline-start-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-start-color

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

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

Live Preview

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

CSS Examples

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

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

<p>Inline start</p>

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

<p>Inline start</p>

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

<p>Inline start</p>

Key Takeaways