Border

TIP

Some border colors vary between light and dark modes. Use the color mode switcher in the site header to check the border colors in the different modes. Using design tokens rather than raw hex codes will ensure you're automatically using the right color for the chosen mode.

Border width

example	Token	PX
	border-width-04	0.4px
	border-width-1	1px
	border-width-2	2px

Border colors

Color tokens applied to borders on form items and buttons

Color	Token	Reference
	border-color-base	Default for interactive elements, dialogs, menus
	border-base-color-hover	When interactive elements on hover
	border-color-subtle	Dividers and thumbnail borders
	border-color-accent	Disabled form item borders
	border-color-focus
	border-color-info	``
	border-color-success	``
	border-color-warning	``
	border-color-error	``

Border radius

Radius	Token	PX (rem)
	border-radius-4	4px (0.25rem)
	border-radius-8	4px (5rem)
	border-radius-16	4px (1rem)
	border-radius-20	4px (1.25rem)
	border-radius-24	24px (1.5rem)
	border-radius-32	32px (2rem)

Border style

Style	Token	Value
	border-style-base	var(--border-width-04) solid var(--border-color-base)
	border-style-accent	var(--border-width-1) solid var(--border-color-accent)
	border-style-focus	var(--border-width-2) solid var(--border-color-accent)
	border-style-active	var(--border-width-1) solid var(--border-color-accent)
	border-style-error	var(--border-width-1) solid var(--border-color-error)
	border-style-success	var(--border-width-1) solid var(--border-color-success)