CSS border playground

Explore border with interactive controls for width, style, and color by side or axis, compare physical and logical properties, and copy the CSS instantly.

CSS output

Shorthand output groups values into CSS shorthands when possible. Individual output generates one declaration per property so each value can be reviewed or copied separately.

Shorthand Individual

Application

Choose how values are distributed: apply one value to the whole element or adjust only the sides, axes, or groups you need.

All Individual Axes

Property system

Physical properties apply directly to the element's sides, while logical properties apply to the element's sides based on the text direction.

Physical Logical

Text direction

With logical properties, it is important to check how results change in languages written left to right and right to left.

Left to right Right to left

Unit

CSS provides many units. Each lab lets you try the most common ones for that property.

All sides

Style

Color

Top

Style

Color

Right

Style

Color

Bottom

Style

Color

Left

Style

Color

X axis

Style

Color

Y axis

Style

Color

border

HTML

<div class="border" dir="ltr">border</div>

CSS

.border {
  min-inline-size: min(100%, 18rem);
  min-block-size: 12rem;
  border: 8px solid #9ec6f3;
}