react-test/docs/data/system/borders/borders.md

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

{{"demo": "BorderAdditive.js", "defaultCodeOpen": false, "bg": true}}

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

Subtractive

{{"demo": "BorderSubtractive.js", "defaultCodeOpen": false, "bg": true}}

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

Border color

{{"demo": "BorderColor.js", "defaultCodeOpen": false}}

<Box sx={{ borderColor: 'primary.main' }}>…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box sx={{ borderColor: 'error.main' }}>…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box sx={{ borderColor: 'text.primary' }}>…

Border-radius

{{"demo": "BorderRadius.js", "defaultCodeOpen": false}}

<Box sx={{ borderRadius: '50%' }}>…
<Box sx={{ borderRadius: 1 }}>… // theme.shape.borderRadius * 1
<Box sx={{ borderRadius: '16px' }}>…

API

import { borders } from '@mui/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
borderTopColor	borderTopColor	border-top-color	palette
borderRightColor	borderRightColor	border-right-color	palette
borderBottomColor	borderBottomColor	border-bottom-color	palette
borderLeftColor	borderLeftColor	border-left-color	palette
borderRadius	borderRadius	border-radius	shape