CSS border-inline-start Property

What You’ll Learn

The border-inline-start property sets a border on the inline-start side — the leading edge along the text flow direction.

Definition and Usage

The border-inline-start CSS property is a logical shorthand that sets the border on the inline-start side of an element. It combines border-inline-start-width, border-inline-start-style, and border-inline-start-color in one declaration.

This property is part of CSS logical properties and adapts to writing mode and text direction. In horizontal left-to-right text, inline-start is usually the left side. In right-to-left text, it is usually the right side — without changing your CSS.

📝 Syntax

border-inline-start accepts border width, style, and color like other border shorthands:

selector {
  border-inline-start: width style color;
}

Basic Example

p {
  border-inline-start: 4px solid red;
}

Syntax Rules

• Sets width, style, and color for the inline-start side only.
• Omitted components use initial values: medium, none, currentcolor.
• Any valid border width, style, and color values are accepted.
• The physical side mapped to inline-start depends on direction and writing-mode.
• Use longhands when you need to set only width, style, or color on inline-start.

Default Value

The default value of border-inline-start is medium none currentcolor. No visible border appears until you set a non-none style and a width greater than zero.

💎 Property Values

Common Value Types

Inline-Start and Writing Modes

border-inline-start always targets the start of the inline axis. The physical side changes with text direction, but the logical meaning stays the same.

border-inline-start vs related properties

Examples Gallery

Try border-inline-start with solid borders, quote accents, RTL text, and dashed styles.

<style>
  p {
    border-inline-start: 4px solid red;
    padding: 0.75rem 1rem;
  }
</style>

<p>This paragraph has a solid red border on the inline-start side.</p>

blockquote {
  margin: 0;
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid #2563eb;
  background: #eff6ff;
  color: #334155;
}

<style>
  .rtl-box {
    direction: rtl;
    padding: 0.75rem 1rem;
    border-inline-start: 4px solid #059669;
    background: #ecfdf5;
  }
</style>

<div class="rtl-box">
  حد منطقي على الجانب الابتدائي
</div>

.note {
  padding: 0.75rem 1rem;
  border-inline-start: 3px dashed #7c3aed;
  background: #faf5ff;
}

💡 Best Practices