Core

Border

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

Border RadiusCopy URL

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 WidthCopy URL

ThinCopy URL

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

ThickCopy URL

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 codeCopy URL

Design token documentation