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--600
JavaScript
BORDER_RADIUS_600
CSS
--border-radius--600
Value
8px
Component
<Box borderRadius='outer' />

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--500
JavaScript
BORDER_RADIUS_500
CSS
--border-radius--500
Value
6px
Component
<Box borderRadius='inner' />

Pill

Pill-shaped element
Sass
$Border-radius--1000
JavaScript
BORDER_RADIUS_1000
CSS
--border-radius--1000
Value
9999em
Component
<Box borderRadius='pill' />

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
Component
<Box border={500} />
<Box borderWidth={500} />
The border prop specifies a solid border of the given width. The borderWidth prop sets the width only (useful when specifying a border style other than solid).

Using Borders in code

Design token documentation