Border

TIP

Some border colors vary between light and dark modes. Use the color mode switcher in the site header to see 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

List of design token names, values and metadata for border-width

Name	Value
border-width-base	1px dimension.absolute.1
border-width-thick	2px dimension.absolute.2
border-width-input-radio--checked	6px dimension.absolute.6

Border style

List of design token names, values and metadata for border-style

Name	Value
border-style-base	solid border-style.100
border-style-dashed	dashed border-style.50

Border color

List of design token names, values and metadata for border-color

Name	Value
border-color-base	#a2a9b1 color.gray400
border-color-subtle	#c8ccd1 color.gray300
border-color-muted	#dadde3 color.gray200
border-color-interactive	#72777d color.gray500
border-color-disabled	#c8ccd1 color.gray300
border-color-inverted	#fff color.white
border-color-progressive	#36c color.blue700
border-color-progressive--hover	#4b77d6 color.blue600
border-color-progressive--active	#233566 color.blue900
border-color-progressive--focus	#36c color.blue700
border-color-destructive	#bf3c2c color.red700
border-color-destructive--hover	#f54739 color.red500
border-color-destructive--active	#9f3526 color.red800
border-color-destructive--focus	#36c color.blue700
border-color-error	#f54739 color.red500
border-color-error--hover	#d74032 color.red600
border-color-error--active	#bf3c2c color.red700
border-color-warning	#ab7f2a color.yellow500
border-color-success	#099979 color.green500
border-color-notice	#72777d color.gray500
border-color-content-added	#a3d3ff color.blue999
border-color-content-removed	#ffe49c color.yellow999
border-color-transparent	transparent color.transparent
border-color-divider	#a2a9b1 color.gray400
border-color-input--hover	#72777d border-color.interactive
border-color-input-binary	#72777d border-color.interactive
border-color-input-binary--hover	#4b77d6 border-color.progressive--hover
border-color-input-binary--active	#233566 border-color.progressive--active
border-color-input-binary--focus	#36c border-color.progressive--focus
border-color-input-binary--checked	#36c border-color.progressive

Border (shorthand)

Note, that only most common shorthands are provided given the number of border-color variants.

List of design token names, values and metadata for border

Name	Value
border-base	1px solid #a2a9b1 border-width.base border-style.base border-color.base
border-subtle	1px solid #c8ccd1 border-width.base border-style.base border-color.subtle
border-progressive	1px solid #36c border-width.base border-style.base border-color.progressive
border-destructive	1px solid #bf3c2c border-width.base border-style.base border-color.destructive

Border radius

List of design token names, values and metadata for border-radius

Name	Value
border-radius-base	2px dimension.absolute.2
border-radius-sharp	0 dimension.0
border-radius-pill	9999px dimension.absolute.9999
border-radius-circle Use `50%` for circle or ellipsis. See https://stackoverflow.com/a/29966500	50% dimension.half