CSS border-inline-end Property

What You’ll Learn

The border-inline-end property sets a border on the inline-end side — the trailing edge along the text flow direction.

Definition and Usage

The border-inline-end CSS property is a logical shorthand that sets the border on the inline-end side of an element. It combines border-inline-end-width, border-inline-end-style, and border-inline-end-color in one declaration.

This property is part of CSS logical properties and adapts to writing mode and text direction. In horizontal left-to-right text, inline-end is usually the right side. In right-to-left text, it is usually the left side — without changing your CSS.

📝 Syntax

border-inline-end accepts border width, style, and color like other border shorthands:

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

Basic Example

div {
  border-inline-end: 4px solid red;
}

Syntax Rules

• Sets width, style, and color for the inline-end side only.
• Omitted components use initial values: medium, none, currentcolor.
• Any valid border width, style, and color values are accepted.
• The physical side mapped to inline-end depends on direction and writing-mode.
• Use longhands when you need to set only width, style, or color on inline-end.

Default Value

The default value of border-inline-end is medium none currentcolor. No visible border appears until you set a non-none style and a width greater than zero.

💎 Property Values

Common Value Types

Inline-End and Writing Modes

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

border-inline-end vs related properties

Examples Gallery

Try border-inline-end with solid borders, quote dividers, RTL text, and dashed styles.

<style>
  div {
    border-inline-end: 4px solid red;
    padding: 0.75rem 1rem;
  }
</style>

<div>This div has a red border on the inline-end side.</div>

.nav-item {
  padding: 0.5rem 1rem;
  border-inline-end: 1px solid #cbd5e1;
}

.nav-item:last-child {
  border-inline-end: none;
}

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

<div class="rtl-box">
  حد منطقي على الجانب النهائي
</div>

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

💡 Best Practices