CSS border-inline-width Property

What You’ll Learn

The border-inline-width property sets how thick the border is on both inline sides — inline-start and inline-end.

Definition and Usage

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

Unlike border-width, which sets thickness on all four sides, border-inline-width only affects the two inline edges and adapts to writing mode and text direction — useful for RTL layouts and multilingual interfaces.

📝 Syntax

border-inline-width accepts keyword or length values — one value for both edges, or two for start and end:

selector {
  border-inline-width: value;
}

Basic Example

.box {
  border-inline-width: 5px;
  border-inline-style: solid;
  border-inline-color: black;
}

Syntax Rules

• Accepts thin, medium, thick, or any length such as 2px or 0.25em.
• One value sets the same width on both inline edges; two values set start then end.
• Only affects the two inline border edges; block sides keep their own widths.
• A visible border-inline-style is required for the width to show.
• In horizontal writing modes, inline edges are usually the left and right sides.
• Default is medium, typically about 3px in most browsers.

Default Value

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

💎 Property Values

Keyword Width Comparison

Inline Width and Writing Modes

border-inline-width applies to both inline-start and inline-end. In horizontal writing modes, that usually means the left and right sides — regardless of text direction.

border-inline-width vs related properties

Examples Gallery

Try border-inline-width with pixel values, keywords, asymmetric widths, and RTL layouts.

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

<div class="box">
  This is a box with 5px inline borders.
</div>

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

.panel {
  border-inline-width: 2px 8px;
  border-inline-style: solid;
  border-inline-color: #7c3aed;
  padding: 0.75rem 1rem;
  background: #faf5ff;
}

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

<div class="rtl-box">
  حدود داخلية على جانبي النر
</div>

💡 Best Practices