Border radius#

Along with setting pixel-based border radii, you can set pre-defined border radii in the global theme using the borderRadius prop.

Box with a default border radius

Box with a border radius of 0

Box with a border radius of 1

Box with a border radius of 2

Box with a border radius of 3

Box with a border radius of 4

Box with a border radius of 5

Box with a border radius of 6

Editable example

<Stack>
  <Box borderRadius="default" border="default" padding="major-3">Box with a default border radius</Box>
  <Box borderRadius="0" border="default" padding="major-3">Box with a border radius of 0</Box>
  <Box borderRadius="1" border="default" padding="major-3">Box with a border radius of 1</Box>
  <Box borderRadius="2" border="default" padding="major-3">Box with a border radius of 2</Box>
  <Box borderRadius="3" border="default" padding="major-3">Box with a border radius of 3</Box>
  <Box borderRadius="4" border="default" padding="major-3">Box with a border radius of 4</Box>
  <Box borderRadius="5" border="default" padding="major-3">Box with a border radius of 5</Box>
  <Box borderRadius="6" border="default" padding="major-3">Box with a border radius of 6</Box>
</Stack>

<Stack>
  <Box borderRadius="default" border="default" padding="major-3">Box with a default border radius</Box>
  <Box borderRadius="0" border="default" padding="major-3">Box with a border radius of 0</Box>
  <Box borderRadius="1" border="default" padding="major-3">Box with a border radius of 1</Box>
  <Box borderRadius="2" border="default" padding="major-3">Box with a border radius of 2</Box>
  <Box borderRadius="3" border="default" padding="major-3">Box with a border radius of 3</Box>
  <Box borderRadius="4" border="default" padding="major-3">Box with a border radius of 4</Box>
  <Box borderRadius="5" border="default" padding="major-3">Box with a border radius of 5</Box>
  <Box borderRadius="6" border="default" padding="major-3">Box with a border radius of 6</Box>
</Stack>

Theming#

Schema#

const theme = {
  borderRadii: {
    default: string,
    '0': string,
    '1': string,
    '2': string,
    '3': string,
    '4': string,
    '5': string,
    '6': string,
    '7': string,
    [key: string]: string
  }
}

Example#

const theme = {
  borders: {
    default: '6px',
    '8': '60px'
  }
}

On this page