Visual

Border

Borders are used as a stylistic way to emphasize elements. Borders can call attention to, contain, or separate content.

Border Radius

Use our predefined border-radius value for rounding common elements like cards, buttons and messages. Alternative values should be avoided except when creating custom shapes.

Border radius example

Sass
$Border-radius--500
JavaScript
BORDER_RADIUS_500
CSS
--border-radius--500
Value
3px

Border Width

Thin

Our standard border width, used for most cases.

Thin border example

Sass
$Border-width--500
JavaScript
BORDER_WIDTH_500
CSS
--border-width--500
Value
1px

Thick

Use the thick border width to show emphasis on an element.

Thick border example

Sass
$Border-width--600
JavaScript
BORDER_WIDTH_600
CSS
--border-width--600
Value
2px

Using Borders in code

Design token documentation