Границы

Используй настройки border и border-radius для стилизации элементов. Доступно для изображений, кнопок и других элементов.

Border

Используй настройки для добавления или удаления границ. Можно устанавливать как все сразу, так и каждую часть по отдельности.

Добавление

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

Удаление

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

Цвет границы

<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

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

API

import { borders } from '@material-ui/system';

Импорт	Свойство	Свойство CSS	В теме
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