Pular para o conteúdo

🎉 v5 is out! Head to the documentation to get started.

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 os utilitários de borda para adicionar ou remover as bordas de um elemento. Escolha para todas as bordas ou separadamente.

Adicionando

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

Removendo

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

Cor da Borda

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