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--600JavaScript
BORDER_RADIUS_600CSS
--border-radius--600Value
8pxComponent
<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--500JavaScript
BORDER_RADIUS_500CSS
--border-radius--500Value
6pxComponent
<Box borderRadius='inner' />Pill
Pill-shaped element
Sass
$Border-radius--1000JavaScript
BORDER_RADIUS_1000CSS
--border-radius--1000Value
9999emComponent
<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--500JavaScript
BORDER_WIDTH_500CSS
--border-width--500Value
1pxComponent
<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).