CSS border-inline-style Property

Definition and Usage

The border-inline-style property sets the line style of both logical inline borders — inline-start and inline-end. It maps to physical edges based on writing-mode, direction, and text-orientation.

In horizontal left-to-right text, those edges are usually left and right, so one declaration covers what border-left-style and border-right-style would do. Use one value for both sides, or two values for start then end. It applies to all elements and is not inherited. Each side starts as none.

CSS Syntax

One value styles both inline edges. Two values set border-inline-start-style then border-inline-end-style. Keywords match border-style.

Property Values

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

How to Use border-inline-style

Pick a visible style for the inline edges, then give those lines a width and a color.

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

Live Preview

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

CSS Examples

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

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

<p>Inline edges</p>

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

<p>Inline edges</p>

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

<p>Inline edges</p>

Key Takeaways