Border

Border Radius

All sides

Use the rounded or borderRadius props to apply border radius on all sides of an element.

<Box borderRadius="md" />
<Box rounded="md" /> // shorthand

Specific sides

Use the rounded{Left,Right,Top,Bottom} or border{Left,Right,Top,Bottom}Radius prop, to apply border radius on a specific side of an element.

<Box borderTopRadius="md" />
<Box roundedTop="md" /> // shorthand

<Box borderLeftRadius="md" />
<Box roundedLeft="md" /> // shorthand

Use the logical equivalent to make the border radius adapt based on the text direction.

<Box roundedStart="md" />
<Box roundedEnd="md" />

Specific corners

Use the border{Top,Bottom}{Left,Right}Radius properties, or the shorthand equivalent to round a specific corner.

<Box borderTopLeftRadius="md" />
<Box roundedTopLeft="md" /> // shorthand

Use the logical properties to adapt based on the text direction.

<Box borderStartStartRadius="md" />
<Box roundedStartStart="md" /> // shorthand

Border Width

All sides

Use the borderWidth prop to apply border width on all sides of an element.

<Box borderWidth="1px" />

Specific sides

Use the border{Left|Right|Top|Bottom}Width prop to apply border width on a specific side of an element.

<Box borderTopWidth="1px" />
<Box borderLeftWidth="1px" />

Use the logical equivalent to make the border width adapt based on the text direction.

<Box borderInlineStartWidth="1px" />
<Box borderInlineWidth="1px" /> // shorthand

Border Color

All sides

Use the borderColor prop to apply border color on all sides of an element.

<Box borderColor="red.400" />

// with opacity modifier
<Box borderColor="red.400/20" />

Specific sides

Use the border{Left,Right,Top,Bottom}Color prop to apply border color on a specific side of an element.

<Box borderTopColor="red.400" />
<Box borderLeftColor="red.400" />

Use the logical properties to adapt based on the text direction.

<Box borderStartColor="red.400" />
<Box borderEndColor="red.400" />

Divide Width

Use the divide{X,Y}Width prop to apply border width between elements. It uses the CSS selector > * + * to apply the border* properties.

<Box divideXWidth="1px">
  <Box>1</Box>
  <Box>2</Box>
</Box>

<Box divideYWidth="1px">
  <Box>1</Box>
  <Box>2</Box>
</Box>

Divide Color

Use the divideColor prop to apply border color between elements.

<Box divideColor="red.400">
  <Box>1</Box>
  <Box>2</Box>
</Box>

Divide Style

Use the divideStyle prop to apply border style between elements.

<Box divideX="2px" divideStyle="dashed">
  <Box>1</Box>
  <Box>2</Box>
</Box>