CSS border-inline-start-width Property

What You’ll Learn

The border-inline-start-width property sets how thick the border is on the inline-start side only.

Definition and Usage

The border-inline-start-width CSS property controls the thickness of the border on the inline-start side of an element. It is a longhand of border-inline-start and accepts the same width values as standard border width properties.

Unlike border-left-width, which always targets the physical left side, border-inline-start-width adapts to writing mode and text direction — useful for RTL layouts and multilingual interfaces.

📝 Syntax

border-inline-start-width accepts keyword or length values:

selector {
  border-inline-start-width: value;
}

Basic Example

p {
  border-inline-start-width: 5px;
  border-inline-start-style: solid;
  border-inline-start-color: #ff5733;
}

Syntax Rules

• Accepts thin, medium, thick, or any length such as 2px or 0.25em.
• Only affects the inline-start border side; other sides keep their own widths.
• A visible border-inline-start-style is required for the width to show.
• The physical side mapped to inline-start depends on direction and writing-mode.
• Default is medium, typically about 3px in most browsers.

Default Value

The default value of border-inline-start-width is medium, which browsers typically render as about 3px when a visible border style is applied.

💎 Property Values

Keyword Width Comparison

Inline-Start Width and Writing Modes

border-inline-start-width always applies to the start of the inline axis. The physical side changes with text direction.

border-inline-start-width vs related properties

Examples Gallery

Try border-inline-start-width with pixel values, keywords, relative units, and RTL layouts.

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

<p>This paragraph has a 5px wide border on the inline start side, which adjusts based on the writing mode of the document.</p>

.thin {
  border-inline-start: thin solid #2563eb;
}
.medium {
  border-inline-start: medium solid #2563eb;
}
.thick {
  border-inline-start: thick solid #2563eb;
}

.quote {
  font-size: 1.25rem;
  border-inline-start-width: 0.25em;
  border-inline-start-style: solid;
  border-inline-start-color: #7c3aed;
  padding: 0.75rem 1rem;
  background: #faf5ff;
}

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

<div class="rtl-box">
  حد سمك ابتدائي عريض
</div>

💡 Best Practices