CSS border-inline-start Property

Definition and Usage

The border-inline-start property is a shorthand for the logical inline-start border. It sets border-inline-start-width, border-inline-start-style, and border-inline-start-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-left. In RTL it usually maps to the right. 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-start

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

1. Choose the element that needs a leading inline edge (quote accent, sidebar divider, start-edge highlight).
2. Set border-inline-start 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-start 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 left. Change the shorthand and watch only the inline-start edge update.

CSS Examples

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

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

<p>Inline start</p>

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

<p>Inline start</p>

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

<p>Inline start</p>

Key Takeaways