Borders

The border theme object is around the following scales: The border theme object uses the following scales that are based on the Styled System Theme Specification:

borders

borderWidths

radii (Radius)

Border

export const borders = {
  1: '1px solid',
  2: '2px solid',
  none: 0
}

export const borderWidths = {
  1: '1px',
  2: '2px',
  none: 0
}

EDITABLE EXAMPLE
copy
<Stack direction="column" spacing="8x" alignItems="center">
  <Stack direction="row" spacing="6x">
    <Box border={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderTop={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderRight={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderBottom={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderLeft={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
  </Stack>
  <Stack direction="row" spacing="6x">
    <Box border={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderTop={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderRight={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderBottom={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderLeft={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
  </Stack>
</Stack>
<Stack direction="column" spacing="8x" alignItems="center">
  <Stack direction="row" spacing="6x">
    <Box border={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderTop={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderRight={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderBottom={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderLeft={1} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
  </Stack>
  <Stack direction="row" spacing="6x">
    <Box border={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderTop={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderRight={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderBottom={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
    <Box borderLeft={2} borderColor="gray:40" width="32x" height="12x" bg="gray:80"/>
  </Stack>
</Stack>

Border Radius

export const radii = {
  circle: '50%',
  none: 0,
  sm: '.1875rem',
  md: '.375rem',
  lg: '.75rem'
}

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing="6x" justifyContent="center">
  <Box border={1} borderColor="gray:40" borderRadius="circle" width="18x" height="18x" bg="gray:80"/>
  <Box border={1} borderColor="gray:40" borderRadius="sm" width="18x" height="18x" bg="gray:80"/>
  <Box border={1} borderColor="gray:40" borderRadius="md" width="18x" height="18x" bg="gray:80"/>
  <Box border={1} borderColor="gray:40" borderRadius="lg" width="18x" height="18x" bg="gray:80"/>
</Stack>
<Stack direction="row" spacing="6x" justifyContent="center">
  <Box border={1} borderColor="gray:40" borderRadius="circle" width="18x" height="18x" bg="gray:80"/>
  <Box border={1} borderColor="gray:40" borderRadius="sm" width="18x" height="18x" bg="gray:80"/>
  <Box border={1} borderColor="gray:40" borderRadius="md" width="18x" height="18x" bg="gray:80"/>
  <Box border={1} borderColor="gray:40" borderRadius="lg" width="18x" height="18x" bg="gray:80"/>
</Stack>

Configuration Reference

Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.

For more information, see the complete properties reference table.