CSS border-inline-end-width Property

What You’ll Learn

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

Definition and Usage

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

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

📝 Syntax

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

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

Basic Example

p {
  border-inline-end-width: 5px;
  border-inline-end-style: solid;
  border-inline-end-color: black;
}

Syntax Rules

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

Default Value

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

💎 Property Values

Keyword Width Comparison

Inline-End Width and Writing Modes

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

border-inline-end-width vs related properties

Examples Gallery

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

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

<p>This paragraph has a border width of 5px on the inline-end side.</p>

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

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

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

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

💡 Best Practices