CSS border-inline-start-color Property

What You’ll Learn

The border-inline-start-color property sets the color of the border on the inline-start side only.

Definition and Usage

The border-inline-start-color CSS property sets the color of the border on the inline-start side of an element. It is a longhand of border-inline-start and part of CSS logical properties that adapt to writing mode and text direction.

Unlike border-left-color, which always targets the physical left side, border-inline-start-color follows the text flow. In LTR horizontal text, inline-start is usually the left side; in RTL, it is usually the right.

📝 Syntax

border-inline-start-color accepts any valid CSS color value:

selector {
  border-inline-start-color: color;
}

Basic Example

.box {
  border: 2px solid;
  border-inline-start-color: green;
}

Syntax Rules

• Accepts named colors, hex, rgb, hsl, currentcolor, and transparent.
• Only affects the inline-start border side; other sides keep their own colors.
• You need a visible border width and style for the color to appear.
• The physical side mapped to inline-start depends on direction and writing-mode.
• Default is currentcolor, matching the element’s text color.

Default Value

The default value of border-inline-start-color is currentcolor. The inline-start border uses the element’s text color unless you set a different color explicitly.

💎 Property Values

Common Value Types

Inline-Start Color and Writing Modes

border-inline-start-color always targets the start of the inline axis. The physical side changes with text direction, but the logical meaning stays the same.

border-inline-start-color vs related properties

Examples Gallery

Try border-inline-start-color with named colors, hex values, currentcolor, and RTL text.

<style>
  p {
    border-inline-start-width: 5px;
    border-inline-start-style: solid;
    border-inline-start-color: green;
    padding: 0.75rem 1rem;
  }
</style>

<p>This paragraph has a green border on the inline start side.</p>

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

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

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

<div class="rtl-box">
  لون الحد المنطقي الابتدائي
</div>

💡 Best Practices