Borders

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

import Box from '@mui/material/Box';

const commonStyles = {
  bgcolor: 'background.paper',
  m: 1,
  borderColor: 'text.primary',
  width: '5rem',
  height: '5rem',
};

export default function BorderAdditive() {
  return (
    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
      <Box sx={{ ...commonStyles, border: 1 }} />
      <Box sx={{ ...commonStyles, borderTop: 1 }} />
      <Box sx={{ ...commonStyles, borderRight: 1 }} />
      <Box sx={{ ...commonStyles, borderBottom: 1 }} />
      <Box sx={{ ...commonStyles, borderLeft: 1 }} />
    </Box>
  );
}

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

Subtractive

import Box from '@mui/material/Box';

const commonStyles = {
  bgcolor: 'background.paper',
  border: 1,
  m: 1,
  borderColor: 'text.primary',
  width: '5rem',
  height: '5rem',
};

export default function BorderSubtractive() {
  return (
    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
      <Box sx={{ ...commonStyles, border: 0 }} />
      <Box sx={{ ...commonStyles, borderTop: 0 }} />
      <Box sx={{ ...commonStyles, borderRight: 0 }} />
      <Box sx={{ ...commonStyles, borderBottom: 0 }} />
      <Box sx={{ ...commonStyles, borderLeft: 0 }} />
    </Box>
  );
}

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

Border color

import Box from '@mui/material/Box';

const commonStyles = {
  bgcolor: 'background.paper',
  m: 1,
  border: 1,
  width: '5rem',
  height: '5rem',
};

export default function BorderColor() {
  return (
    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
      <Box sx={{ ...commonStyles, borderColor: 'primary.main' }} />
      <Box sx={{ ...commonStyles, borderColor: 'secondary.main' }} />
      <Box sx={{ ...commonStyles, borderColor: 'error.main' }} />
      <Box sx={{ ...commonStyles, borderColor: 'grey.500' }} />
      <Box sx={{ ...commonStyles, borderColor: 'text.primary' }} />
    </Box>
  );
}

<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

import Box from '@mui/material/Box';

const commonStyles = {
  bgcolor: 'background.paper',
  borderColor: 'text.primary',
  m: 1,
  border: 1,
  width: '5rem',
  height: '5rem',
};

export default function BorderRadius() {
  return (
    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
      <Box sx={{ ...commonStyles, borderRadius: '50%' }} />
      <Box sx={{ ...commonStyles, borderRadius: 1 }} />
      <Box sx={{ ...commonStyles, borderRadius: '16px' }} />
    </Box>
  );
}

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

API

import { borders } from '@mui/system';

Import name	Prop	CSS property	Theme key
`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`
`borderTopColor`	`borderTopColor`	`border-top-color`	`palette`
`borderRightColor`	`borderRightColor`	`border-right-color`	`palette`
`borderBottomColor`	`borderBottomColor`	`border-bottom-color`	`palette`
`borderLeftColor`	`borderLeftColor`	`border-left-color`	`palette`
`borderRadius`	`borderRadius`	`border-radius`	`shape`