CSS border-inline-color Property

What You’ll Learn

The border-inline-color property sets the color of borders on the inline-start and inline-end sides of an element.

Definition and Usage

The border-inline-color CSS property sets the color of borders along the inline axis — on inline-start and inline-end. It is a longhand of the border-inline shorthand and works with logical properties that adapt to writing mode and text direction.

Unlike border-left-color and border-right-color, which always target physical sides, border-inline-color keeps your color rules correct in both LTR and RTL layouts. You can set one color for both inline sides or two colors for start and end.

📝 Syntax

border-inline-color accepts one or two color values:

/* one color for both inline sides */
selector {
  border-inline-color: color;
}

/* start color and end color */
selector {
  border-inline-color: start-color end-color;
}

Basic Example

div {
  border-inline-width: 4px;
  border-inline-style: solid;
  border-inline-color: green blue;
}

Syntax Rules

• One color applies to both inline-start and inline-end.
• Two colors set inline-start first, then inline-end.
• Any valid CSS color value works: named colors, hex, rgb, hsl, currentcolor, transparent.
• You need a visible border width and style for the color to appear.
• The mapped physical sides change with direction and writing-mode.

Default Value

The default value of border-inline-color is currentcolor. That means inline borders use the element’s text color unless you set a different color explicitly.

💎 Property Values

Common Value Types

Inline Border Colors and Writing Modes

With border-inline-color: green blue, green always applies to inline-start and blue to inline-end — regardless of whether inline-start is on the left or right.

border-inline-color vs related properties

Examples Gallery

Try border-inline-color with start/end colors, a single color, currentcolor, and RTL text.

<style>
  div {
    border-inline-width: 4px;
    border-inline-style: solid;
    border-inline-color: green blue;
    padding: 0.75rem 1rem;
  }
</style>

<div>
  Green border on start, blue border on end.
</div>

.card {
  border-inline: 3px solid;
  border-inline-color: #2563eb;
  padding: 1rem;
  background: #eff6ff;
}

.quote {
  color: #7c3aed;
  border-inline: 4px solid;
  border-inline-color: currentcolor;
  padding: 0.75rem 1rem;
}

<style>
  .rtl-box {
    direction: rtl;
    border-inline: 4px solid;
    border-inline-color: #059669 #2563eb;
    padding: 0.75rem 1rem;
    background: #ecfdf5;
  }
</style>

<div class="rtl-box">
  نراس الحدود المنطقية
</div>

💡 Best Practices