CSS border-inline-width Property

Definition and Usage

The border-inline-width property sets the thickness 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-width and border-right-width 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 medium.

CSS Syntax

One value sizes both inline edges. Two values set border-inline-start-width then border-inline-end-width. Values match <line-width>.

Property Values

Negative lengths are invalid. Keyword sizes are not fixed pixels; they can vary slightly by browser.

How to Use border-inline-width

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

1. Set border-inline-width to a length or keyword such as 5px or thick, or two values such as 5px 12px.
2. Set border-inline-style to a visible value such as solid.
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 style and color. Only border-inline-width changes.

CSS Examples

Each snippet shows only what you need for the inline widths: a size, a style, and a color. Use Try It Yourself for a live editor.

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

<p>Inline edges</p>

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

<p>Inline edges</p>

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

<p>Inline edges</p>

Key Takeaways