Border styles
Border states
Border emphasis
color / border
default
Used to outline container, cards or as separators.
muted
Muted border color for sitations where a hint of a border is enough. Not accessible.
strong
Strong border used to for specific UI elements with contrast requirements like e.g. Input, Checkbox or RadioButton.
disabled
interactive
Selected and active borders.
success
Use as borders on success components such as text inputs.
danger
Default error border color. Use to highlight validation errors or critical situtions in flows e.g. a mandatory input field left empty.
on-color
on-color-muted
Border width
Border Width / border-width
none
default
medium
bold
extra-bold
Border radius
Border Radius / border-radius
xs
sm
md
lg
round