CSS border-inline-end Property

Definition and Usage

The border-inline-end property is a shorthand for the logical inline-end border. It sets border-inline-end-width, border-inline-end-style, and border-inline-end-color in one place.

Which physical edge that is depends on writing-mode, direction, and text-orientation. In default horizontal LTR text it acts like border-right. In RTL it usually maps to the left. It applies to all elements and is not inherited.

CSS Syntax

You can list width, style, and color in any order. Omit a piece to keep its initial value. The initial style is none, so a style keyword is required to see a line.

Property Values

hidden, groove, ridge, inset, and outset are also valid styles. You can combine width, style, and color in any order, for example 4px solid blue.

How to Use border-inline-end

Pick a visible style, then set width and color. Prefer this over border-right when the layout must flip with text direction.

1. Choose the element that needs a trailing inline edge (divider after text, accent after a card, and so on).
2. Set border-inline-end with at least a style, such as 4px solid blue.
3. Check LTR and RTL (or your writing mode). The border should stay on the inline-end side.
4. Use the longhands only when you need to change width, style, or color alone later.

Live Preview

In default LTR text the border sits on the right. Change the shorthand and watch only the inline-end edge update.

CSS Examples

Each snippet keeps only what border-inline-end needs. Use Try It Yourself for a live editor.

<style>
  p {
    border-inline-end: 4px solid blue;
  }
</style>

<p>Inline end</p>

<style>
  p {
    direction: rtl;
    border-inline-end: 4px solid blue;
  }
</style>

<p>Inline end</p>

<style>
  p {
    writing-mode: vertical-rl;
    border-inline-end: 4px solid blue;
  }
</style>

<p>Inline end</p>

Key Takeaways