CSS border-inline Property

What You’ll Learn

The border-inline property is a logical shorthand for borders on the inline-start and inline-end sides of an element.

Definition and Usage

The border-inline CSS property is a shorthand that sets borders on both inline sides of an element — inline-start and inline-end. It combines border-inline-width, border-inline-style, and border-inline-color in one declaration.

Unlike border-left and border-right, which always target physical sides, border-inline adapts to writing mode and text direction. In horizontal left-to-right text, inline sides are usually left and right. In right-to-left text, the same rule still applies to the correct sides relative to the reading direction.

📝 Syntax

border-inline accepts border width, style, and color values like the regular border shorthand:

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

Basic Example

p {
  border-inline: 2px solid blue;
}

Syntax Rules

• One width value applies the same border width to inline-start and inline-end.
• Two width values set inline-start first, then inline-end.
• Style and color values apply to both inline sides unless set via longhands.
• Omitted components use their initial values: medium, none, currentcolor.
• The mapped physical sides change with direction and writing-mode.

Default Value

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

💎 Property Values

Common Value Types

Inline Borders and Writing Modes

border-inline targets the sides along the inline axis. In horizontal LTR text, that is usually left and right. In RTL, the physical sides swap but the logical inline sides stay correct relative to text flow.

border-inline vs related properties

Examples Gallery

Try border-inline with equal borders, asymmetric widths, RTL text, and dashed styles.

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

<p>
  This paragraph has a 2px solid blue border on both inline sides.
</p>

.quote {
  padding: 0.75rem 1rem;
  border-inline: 2px 6px solid #2563eb;
  background: #eff6ff;
}

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

<p class="rtl-text">
  نص تجريبي بالعحاد المنطقي
</p>

.callout {
  padding: 1rem;
  border-inline: 3px dashed #7c3aed;
  background: #faf5ff;
  border-radius: 0.5rem;
}

💡 Best Practices