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 |