CSS border-inline-end-style Property

What You’ll Learn

The border-inline-end-style property sets the line style of the border on the inline-end side only.

Definition and Usage

The border-inline-end-style CSS property controls how the border line is drawn on the inline-end side of an element. It is a longhand of border-inline-end and accepts the same style keywords as standard border properties.

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

📝 Syntax

border-inline-end-style accepts standard border style keywords:

selector {
  border-inline-end-style: style;
}

Basic Example

p {
  border-inline-end-style: dashed;
  border-inline-end-width: 2px;
  border-inline-end-color: black;
}

Syntax Rules

• Accepts none, solid, dashed, dotted, double, and 3D styles.
• Only affects the inline-end border side; other sides keep their own styles.
• You need a width greater than zero for the style to be visible.
• The physical side mapped to inline-end depends on direction and writing-mode.
• Default is none, which draws no border on inline-end.

Default Value

The default value of border-inline-end-style is none. No inline-end border is drawn until you set a visible style such as solid or dashed.

💎 Property Values

Common Style Types

Inline-End Style and Writing Modes

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

border-inline-end-style vs related properties

Examples Gallery

Try border-inline-end-style with dashed, mixed styles, dotted, and RTL layouts.

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

<p>This paragraph has a dashed border on the inline-end side.</p>

.card {
  border: 2px solid #cbd5e1;
  border-inline-end-style: dashed;
  border-inline-end-color: #2563eb;
  padding: 1rem;
  background: #eff6ff;
}

.note {
  border-inline-end: 3px dotted #7c3aed;
  padding: 0.75rem 1rem;
  background: #faf5ff;
}

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

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

💡 Best Practices