Visual

Border

Borders are a stylistic way to emphasize elements, and 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 border example

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

Using Borders in code

Design token documentation