CSS border-inline-color Property

Definition and Usage

The border-inline-color property sets the color of an element’s logical inline-start and inline-end borders. In the default horizontal writing mode, that means the left and right border colors.

One color paints both sides. Two colors set start first and end second. It maps to physical sides based on writing-mode and direction. For the other axis, use border-block-color.

CSS Syntax

The initial value is currentColor. You still need a visible border-inline-style and width for the color to show.

Property Values

How to Use border-inline-color

Give the inline borders a style and width first, then set their color.

1. Set a visible inline border, for example border-inline: 4px solid; or separate width and style.
2. Add border-inline-color with one color for both sides, or two colors for start and end.
3. Leave the block sides alone, or color them with border-block-color.
4. Remember: without a style other than none, the color will not show.

Live Preview

The box already has a solid 4px inline border. Change only border-inline-color.

CSS Examples

Each snippet focuses on border-inline-color. Style and width are only there so the color can show. Use Try It Yourself for a live editor.

<style>
  div {
    border-inline: 4px solid;
    border-inline-color: #2563eb;
    padding: 12px;
  }
</style>

<div>Same color on both inline sides</div>

<style>
  div {
    border-inline: 4px solid;
    border-inline-color: #2563eb #0f766e;
    padding: 12px;
  }
</style>

<div>Blue start, teal end</div>

<style>
  div {
    color: #7c3aed;
    border-inline: 4px solid;
    border-inline-color: currentColor;
    padding: 12px;
  }
</style>

<div>Border matches text color</div>

Key Takeaways