Pular para o conteúdo

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={{ 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}>

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 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