Bordas

Use os utilitários de borda para rapidamente estilizar "border" e "border-radius" de um elemento. Ótimo para imagens, botões ou qualquer outro elemento.

Border

Use border utilities to add or remove an element's borders. Escolha para todas as bordas ou separadamente.

Adicionando

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

Removendo

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

Cor da Borda

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

Border-radius

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

API

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

Nome da importação	Propriedade	Propriedade CSS	Chave do tema
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