CSS border-inline-end-style Property

Definition and Usage

The border-inline-end-style property sets the line style of the logical inline-end border. It maps to a physical edge based on writing-mode, direction, and text-orientation.

In default horizontal LTR text, inline-end is usually the right edge, so this property acts like border-right-style. In RTL it usually styles the left edge. It applies to all elements and is not inherited. The initial value is none.

CSS Syntax

These are the same <line-style> keywords used by physical border styles. The initial value is none.

Property Values

ridge, inset, outset, and hidden are also valid line styles. hidden hides the border like none, but can behave differently in table border collapsing.

How to Use border-inline-end-style

Pick a visible style, then give the line a width and a color so you can see it.

1. Set border-inline-end-style to a keyword such as solid or dashed.
2. Set border-inline-end-width to a size larger than 0.
3. Set border-inline-end-color so the line contrasts with the background.
4. Or use the border-inline-end shorthand for width, style, and color in one line.

Live Preview

The box keeps the same width and color. Only border-inline-end-style changes.

CSS Examples

Each snippet shows only what you need for the inline-end style: a keyword, a width, and a color. Use Try It Yourself for a live editor.

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

<p>Inline end</p>

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

<p>Inline end</p>

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

<p>Inline end</p>

Key Takeaways