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`