Borders

export const borders = {
  1: '.0625rem solid',
  2: '.125rem solid',
  3: '.1875rem solid',
  4: '.25rem solid',
  5: '.3125rem solid'
}

Border

The border shorthand property sets all the border properties in one declaration.

copy
/* style */
border="solid"

/* width | style */
border="2px dotted"

/* style | color */
border="outset #f33"

/* width | style | color */
border="medium dashed green"

/* Global values */
border="inherit"
border="initial"
border="unset"
/* style */
border="solid"

/* width | style */
border="2px dotted"

/* style | color */
border="outset #f33"

/* width | style | color */
border="medium dashed green"

/* Global values */
border="inherit"
border="initial"
border="unset"

The border property may be specified using one, two, or three of the values listed below. The order of the value does not matter. See border in MDN for more details.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none.

Values

<border-color> Sets the color of the border. Defaults to currentcolor if absent.

<border-style> Sets the style of the border. Defaults to none if absent.

<border-width> Sets the thickness of the border. Defaults to medium if absent.

Nonnegative length

If the border is a numeric value defined in the theme, the solid border style will be applied as a shorthand for the borderWidth and borderStyle properties.

EDITABLE EXAMPLE
copy
const Block = (props) => {
  const [colorMode] = useColorMode();
  const backgroundColor = {
    dark: 'gray:90',
    light: 'gray:10',
  }[colorMode];
  return (
    <Flex
      px="4x"
      py="3x"
      alignItems="flex-start"
      justifyContent="center"
      flexDirection="column"
      backgroundColor={backgroundColor}
      {...props}
    />
  );
};

function Example() {
  const theme = useTheme();
  const borderColor = 'gray:50';
  const borderWidths = [1, 2, 3, 4, 5];
  const [borderWidth, setBorderWidth] = React.useState(borderWidths[0]);
  const borderValue = theme.borders[borderWidth] || borderWidth;
  const borderColorValue = theme.colors[borderColor] || borderColor;

  return (
    <>
      <Flex align="center" mb="5x">
        <TextLabel>border =</TextLabel>
        <Space width="2x" />
        <Stack direction="row" spacing="2x">
          {borderWidths.map((width) => (
            <Button
              key={width}
              onClick={() => setBorderWidth(width)}
              variant={width === borderWidth ? 'primary' : 'secondary'}
            >
              <Text fontFamily="mono">{width}</Text>
            </Button>
          ))}
        </Stack>
      </Flex>
      <Flex>
        <Grid
          templateColumns="1fr 1fr 1fr"
          columnGap="6x"
          rowGap="6x"
        >
          <Box />
          <Block
            borderTop={borderWidth}
            borderTopColor={borderColor}
          >
            <Text>borderTop="{borderValue}"</Text>
            <Text>borderTopColor="{borderColorValue}"</Text>
          </Block>
          <Box />
          <Block
            borderLeft={borderWidth}
            borderLeftColor={borderColor}
          >
            <Text>borderLeft="{borderValue}"</Text>
            <Text>borderLeftColor="{borderColorValue}"</Text>
          </Block>
          <Block
            border={borderWidth}
            borderColor={borderColor}
          >
            <Text>border="{borderValue}"</Text>
            <Text>borderColor="{borderColorValue}"</Text>
          </Block>
          <Block
            borderRight={borderWidth}
            borderRightColor={borderColor}
          >
            <Text>borderRight="{borderValue}"</Text>
            <Text>borderRightColor="{borderColorValue}"</Text>
          </Block>
          <Box />
          <Block
            borderBottom={borderWidth}
            borderBottomColor={borderColor}
          >
            <Text>borderBottom="{borderValue}"</Text>
            <Text>borderBottomColor="{borderColorValue}"</Text>
          </Block>
          <Box />
        </Grid>
      </Flex>
    </>
  );
}

render(<Example />);
const Block = (props) => {
  const [colorMode] = useColorMode();
  const backgroundColor = {
    dark: 'gray:90',
    light: 'gray:10',
  }[colorMode];
  return (
    <Flex
      px="4x"
      py="3x"
      alignItems="flex-start"
      justifyContent="center"
      flexDirection="column"
      backgroundColor={backgroundColor}
      {...props}
    />
  );
};

function Example() {
  const theme = useTheme();
  const borderColor = 'gray:50';
  const borderWidths = [1, 2, 3, 4, 5];
  const [borderWidth, setBorderWidth] = React.useState(borderWidths[0]);
  const borderValue = theme.borders[borderWidth] || borderWidth;
  const borderColorValue = theme.colors[borderColor] || borderColor;

  return (
    <>
      <Flex align="center" mb="5x">
        <TextLabel>border =</TextLabel>
        <Space width="2x" />
        <Stack direction="row" spacing="2x">
          {borderWidths.map((width) => (
            <Button
              key={width}
              onClick={() => setBorderWidth(width)}
              variant={width === borderWidth ? 'primary' : 'secondary'}
            >
              <Text fontFamily="mono">{width}</Text>
            </Button>
          ))}
        </Stack>
      </Flex>
      <Flex>
        <Grid
          templateColumns="1fr 1fr 1fr"
          columnGap="6x"
          rowGap="6x"
        >
          <Box />
          <Block
            borderTop={borderWidth}
            borderTopColor={borderColor}
          >
            <Text>borderTop="{borderValue}"</Text>
            <Text>borderTopColor="{borderColorValue}"</Text>
          </Block>
          <Box />
          <Block
            borderLeft={borderWidth}
            borderLeftColor={borderColor}
          >
            <Text>borderLeft="{borderValue}"</Text>
            <Text>borderLeftColor="{borderColorValue}"</Text>
          </Block>
          <Block
            border={borderWidth}
            borderColor={borderColor}
          >
            <Text>border="{borderValue}"</Text>
            <Text>borderColor="{borderColorValue}"</Text>
          </Block>
          <Block
            borderRight={borderWidth}
            borderRightColor={borderColor}
          >
            <Text>borderRight="{borderValue}"</Text>
            <Text>borderRightColor="{borderColorValue}"</Text>
          </Block>
          <Box />
          <Block
            borderBottom={borderWidth}
            borderBottomColor={borderColor}
          >
            <Text>borderBottom="{borderValue}"</Text>
            <Text>borderBottomColor="{borderColorValue}"</Text>
          </Block>
          <Box />
        </Grid>
      </Flex>
    </>
  );
}

render(<Example />);

Keyword

thin, medium, and thick are keywords that indicate the border width. You can use them in the border property, but you have to set the borderStyle property to solid as well.

Note: Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.

EDITABLE EXAMPLE
copy
const Block = (props) => {
  const [colorMode] = useColorMode();
  const backgroundColor = {
    dark: 'gray:90',
    light: 'gray:10',
  }[colorMode];
  return (
    <Flex
      px="4x"
      py="3x"
      alignItems="flex-start"
      justifyContent="center"
      flexDirection="column"
      backgroundColor={backgroundColor}
      {...props}
    />
  );
};

function Example() {
  const theme = useTheme();
  const borderColor = 'gray:50';
  const borderStyle = 'solid';
  const borderWidths = ['thin', 'medium', 'thick'];
  const [borderWidth, setBorderWidth] = React.useState(borderWidths[0]);
  const borderValue = theme.borders[borderWidth] || borderWidth;
  const borderColorValue = theme.colors[borderColor] || borderColor;

  return (
    <>
      <Flex align="center" mb="5x">
        <TextLabel>border =</TextLabel>
        <Space width="2x" />
        <Stack direction="row" spacing="2x">
          {borderWidths.map((width) => (
            <Button
              key={width}
              onClick={() => setBorderWidth(width)}
              variant={width === borderWidth ? 'primary' : 'secondary'}
            >
              <Text fontFamily="mono">{width}</Text>
            </Button>
          ))}
        </Stack>
      </Flex>
      <Flex>
        <Grid
          templateColumns="1fr 1fr 1fr"
          columnGap="6x"
          rowGap="6x"
        >
          <Box />
          <Block
            borderTop={borderWidth}
            borderTopColor={borderColor}
            borderTopStyle={borderStyle}
          >
            <Text>borderTop="{borderValue}"</Text>
            <Text>borderTopColor="{borderColorValue}"</Text>
            <Text>borderTopStyle="{borderStyle}"</Text>
          </Block>
          <Box />
          <Block
            borderLeft={borderWidth}
            borderLeftColor={borderColor}
            borderLeftStyle={borderStyle}
          >
            <Text>borderLeft="{borderValue}"</Text>
            <Text>borderLeftColor="{borderColorValue}"</Text>
            <Text>borderLeftStyle="{borderStyle}"</Text>
          </Block>
          <Block
            border={borderWidth}
            borderColor={borderColor}
            borderStyle={borderStyle}
          >
            <Text>border="{borderValue}"</Text>
            <Text>borderColor="{borderColorValue}"</Text>
            <Text>borderStyle="{borderStyle}"</Text>
          </Block>
          <Block
            borderRight={borderWidth}
            borderRightColor={borderColor}
            borderRightStyle={borderStyle}
          >
            <Text>borderRight="{borderValue}"</Text>
            <Text>borderRightColor="{borderColorValue}"</Text>
            <Text>borderRightStyle="{borderStyle}"</Text>
          </Block>
          <Box />
          <Block
            borderBottom={borderWidth}
            borderBottomColor={borderColor}
            borderBottomStyle={borderStyle}
          >
            <Text>borderBottom="{borderValue}"</Text>
            <Text>borderBottomColor="{borderColorValue}"</Text>
            <Text>borderBottomStyle="{borderStyle}"</Text>
          </Block>
          <Box />
        </Grid>
      </Flex>
    </>
  );
}

render(<Example />);
const Block = (props) => {
  const [colorMode] = useColorMode();
  const backgroundColor = {
    dark: 'gray:90',
    light: 'gray:10',
  }[colorMode];
  return (
    <Flex
      px="4x"
      py="3x"
      alignItems="flex-start"
      justifyContent="center"
      flexDirection="column"
      backgroundColor={backgroundColor}
      {...props}
    />
  );
};

function Example() {
  const theme = useTheme();
  const borderColor = 'gray:50';
  const borderStyle = 'solid';
  const borderWidths = ['thin', 'medium', 'thick'];
  const [borderWidth, setBorderWidth] = React.useState(borderWidths[0]);
  const borderValue = theme.borders[borderWidth] || borderWidth;
  const borderColorValue = theme.colors[borderColor] || borderColor;

  return (
    <>
      <Flex align="center" mb="5x">
        <TextLabel>border =</TextLabel>
        <Space width="2x" />
        <Stack direction="row" spacing="2x">
          {borderWidths.map((width) => (
            <Button
              key={width}
              onClick={() => setBorderWidth(width)}
              variant={width === borderWidth ? 'primary' : 'secondary'}
            >
              <Text fontFamily="mono">{width}</Text>
            </Button>
          ))}
        </Stack>
      </Flex>
      <Flex>
        <Grid
          templateColumns="1fr 1fr 1fr"
          columnGap="6x"
          rowGap="6x"
        >
          <Box />
          <Block
            borderTop={borderWidth}
            borderTopColor={borderColor}
            borderTopStyle={borderStyle}
          >
            <Text>borderTop="{borderValue}"</Text>
            <Text>borderTopColor="{borderColorValue}"</Text>
            <Text>borderTopStyle="{borderStyle}"</Text>
          </Block>
          <Box />
          <Block
            borderLeft={borderWidth}
            borderLeftColor={borderColor}
            borderLeftStyle={borderStyle}
          >
            <Text>borderLeft="{borderValue}"</Text>
            <Text>borderLeftColor="{borderColorValue}"</Text>
            <Text>borderLeftStyle="{borderStyle}"</Text>
          </Block>
          <Block
            border={borderWidth}
            borderColor={borderColor}
            borderStyle={borderStyle}
          >
            <Text>border="{borderValue}"</Text>
            <Text>borderColor="{borderColorValue}"</Text>
            <Text>borderStyle="{borderStyle}"</Text>
          </Block>
          <Block
            borderRight={borderWidth}
            borderRightColor={borderColor}
            borderRightStyle={borderStyle}
          >
            <Text>borderRight="{borderValue}"</Text>
            <Text>borderRightColor="{borderColorValue}"</Text>
            <Text>borderRightStyle="{borderStyle}"</Text>
          </Block>
          <Box />
          <Block
            borderBottom={borderWidth}
            borderBottomColor={borderColor}
            borderBottomStyle={borderStyle}
          >
            <Text>borderBottom="{borderValue}"</Text>
            <Text>borderBottomColor="{borderColorValue}"</Text>
            <Text>borderBottomStyle="{borderStyle}"</Text>
          </Block>
          <Box />
        </Grid>
      </Flex>
    </>
  );
}

render(<Example />);

Border Radius

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

borderRadius="circle"

EDITABLE EXAMPLE
copy
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="circle"
  width="18x"
  height="18x"
/>
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="circle"
  width="18x"
  height="18x"
/>

borderRadius="sm"

EDITABLE EXAMPLE
copy
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="sm"
  width="18x"
  height="18x"
/>
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="sm"
  width="18x"
  height="18x"
/>

borderRadius="md"

EDITABLE EXAMPLE
copy
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="md"
  width="18x"
  height="18x"
/>
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="md"
  width="18x"
  height="18x"
/>

borderRadius="lg"

EDITABLE EXAMPLE
copy
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="lg"
  width="18x"
  height="18x"
/>
<Box
  backgroundColor="gray:80"
  border={1}
  borderColor="gray:40"
  borderRadius="lg"
  width="18x"
  height="18x"
/>

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

• Outlines never take up space, as they are drawn outside of an element's content.
• According to the spec, outlines don't have to be rectangular, although they usually are.