Saltar al contenido

Bordes

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

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

Subtractive

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

Color de borde

<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';
Nombre del import Prop Propiedad CSS Clave del 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