Borders#

Along with setting CSS borders, you can set pre-defined borders in the global theme using the border prop.

Box with a default border

Box with a manual border

Editable example

<Stack>
  <Box border="default" padding="major-2">Box with a default border</Box>
  <Box border="1px solid black" padding="major-2">Box with a manual border</Box>
</Stack>

<Stack>
  <Box border="default" padding="major-2">Box with a default border</Box>
  <Box border="1px solid black" padding="major-2">Box with a manual border</Box>
</Stack>

Theming#

Schema#

const theme = {
  borders: {
    default: {
      color: string,
      width: string
    }
    [key: string]: {
      color: string,
      width: string
    }
  }
}

Example#

const theme = {
  borders: {
    solidBlack: {
      color: 'black',
      width: '2px'
    }
  }
}

On this page