Border

Ready to use

The border utilities control borders.

How it works

Border utilities set border-color, border-width, and border-radius directly on the element.

Scheme-aware color classes (e.g. .border-default, .border-emphasis) automatically adapt to the active color scheme. Wrap content in a .tng-scheme.is-contrast element to switch to contrast colors. Non-scheme color classes (e.g. .border-primary, .border-error) set border-color directly.

Colors

.border-default

.border-emphasis

.border-subtle

.border-muted

.border-dim-default

.border-dim-subtle

.border-dim-muted

.border-primary

.border-primary-subtle

.border-primary-muted

.border-secondary

.border-secondary-subtle

.border-secondary-muted

.border-bz4x

.border-bz4x-subtle

.border-bz4x-muted

.border-ev

.border-success

.border-success-subtle

.border-success-muted

.border-error

.border-error-subtle

.border-error-muted

.border-info

.border-info-subtle

.border-info-muted

.border-warning

Size

Border size utilities set border-width directly. These work seamlessly with border color and radius utilities, and can be composed or overridden at any scope.

.border-xs

.border-sm

.border-md

.border-lg

Radius

Border radius utilities set border-radius directly. These work seamlessly with border color and size utilities, and can be composed or overridden at any scope.

.radius-2xs

.radius-xs

.radius-sm

.radius-md

.radius-lg

.radius-xl