CSS border-inline Property

Definition and Usage

The border-inline property is a logical shorthand that sets border-inline-width, border-inline-style, and border-inline-color on both the inline-start and inline-end sides at once.

In the default horizontal writing mode, that means left and right. Change writing-mode or direction, and the same rule maps to different physical edges. For the other axis, use border-block.

CSS Syntax

Same value shape as border, but only for the inline axis. One declaration styles both inline sides the same way.

Property Values

How to Use border-inline

Think in inline start and end, not only left and right.

1. Decide you want matching borders on the inline axis (usually left and right in English layouts).
2. Set a style such as solid or dashed. Without a style, nothing draws.
3. Add width and color as needed: border-inline: 4px solid #2563eb;.
4. If start and end must differ, switch to border-inline-start and border-inline-end.

Live Preview

Change border-inline and the writing mode. Watch which physical edges pick up the border.

CSS Examples

Each snippet focuses on border-inline. Use Try It Yourself for a live editor.

<style>
  div {
    border-inline: 4px solid #2563eb;
    padding: 12px;
  }
</style>

<div>Left and right borders</div>

<style>
  div {
    border-inline: 3px dashed #dc2626;
    padding: 12px;
  }
</style>

<div>Dashed inline sides</div>

<style>
  div {
    writing-mode: vertical-rl;
    border-inline: 4px solid #0f766e;
    padding: 12px;
  }
</style>

<div>Vertical text</div>

Key Takeaways