CSS border-inline-start-width Property

Definition and Usage

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

In horizontal left-to-right text, inline-start is usually the left edge, so this property acts like border-left-width. In RTL, the same declaration moves to the right. It applies to all elements and is not inherited. The initial value is medium.

CSS Syntax

These are the same <line-width> values used by physical border widths. The initial value is medium.

Property Values

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

How to Use border-inline-start-width

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

1. Set border-inline-start-width to a length or keyword such as 5px or thick.
2. Set border-inline-start-style to a visible value such as solid.
3. Set border-inline-start-color so the line contrasts with the background.
4. Or use the border-inline-start shorthand for width, style, and color in one line.

Live Preview

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

CSS Examples

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

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

<p>Inline start</p>

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

<p>Inline start</p>

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

<p>Inline start</p>

Key Takeaways