CSS border-inline

The border-inline property is a logical shorthand for the borders on the inline-start and inline-end sides of an element. In left-to-right horizontal writing, those are usually the left and right borders.

Syntax

border-inline: 1px solid currentColor;
border-inline: 0.25rem dashed #2563eb;

Example

.note {
  border-inline: 0.25rem solid #2563eb;
  padding-inline: 1rem;
}

Result:

Logical borders adapt better when direction or writing mode changes.

Why use it

Use logical border properties when your layout may support multiple languages, writing modes or directions. Use physical properties such as border-left when you specifically mean the physical side.