Border

The border utilities control borders using custom properties. For a multi-purpose color components, see the Box.

Custom properties

These utilities set these custom properties:

• --tng-border-color
• --tng-border-radius
• --tng-border-size

These can be combined with other utilities, overridden in descendant elements or inline styles, or set directly to any value: style="--tng-border-color: green;". For more complex scenarios, use the Box component instead, which can switch color schemes for all its child content automatically.

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 control the thickness of borders using the --tng-border-size custom property. 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 control the roundness of borders using the --tng-border-radius custom property. 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