Перейти к контенту

🎉 Material UI v5 is out now! Check out the announcement blog post →

Границы

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

Border

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

Добавление

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

Удаление

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

Цвет границы

<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';
Импорт Свойство Свойство 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