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.

Outer

Outer is used when the element is the outer most container.

Outer - 8px
Inner - 6px
Sass
$Border-radius-500
JavaScript
BORDER_RADIUS_500
CSS
--border-radius--500
Value
6px

Inner

Inner is used when the element is contained within an outer element. Inner prevents an optical illusion that causes outer to appear as though it’s bulging when the border radii are stacked.

Outer - 8px
Inner - 6px
Sass
$Border-radius-600
JavaScript
BORDER_RADIUS_600
CSS
--border-radius--600
Value
8px

Pill

Pill-shaped element
Sass
$Border-radius-1000
JavaScript
BORDER_RADIUS_1000
CSS
--border-radius--1000
Value
9999em

Known exceptions

Our

is small, so in order to retain it’s square shape we use a border radius of 4px.

Border width

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

Using Borders in code

Design token documentation