Skip to content

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

<Box border={1}><Box borderTop={1}><Box borderRight={1}><Box borderBottom={1}><Box borderLeft={1}>

Subtractive

<Box border={0}><Box borderTop={0}><Box borderRight={0}><Box borderBottom={0}><Box borderLeft={0}>

Border color

<Box borderColor="primary.main"><Box borderColor="secondary.main"><Box borderColor="error.main"><Box borderColor="grey.500"><Box borderColor="text.primary">

Border-radius

<Box borderRadius="50%"><Box borderRadius="borderRadius"><Box borderRadius={16}>

API

import { borders } from '@material-ui/system';
Import name Prop CSS property Theme key
border border border borders
borderTop borderTop border-top borders
borderLeft borderLeft border-left borders
borderRight borderRight border-right borders
borderBottom borderBottom border-bottom borders
borderColor borderColor border-color palette
borderRadius borderRadius border-radius shape