Border
The border utilities control borders.
How it works
Section titled “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
Section titled “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 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
Section titled “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