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

Prop	CSS Property	Token Category
rounded, borderRadius	border-radius	radii

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" />

Prop	CSS Property	Token Category
roundedLeft, borderLeftRadius	border-left-radius	radii
roundedRight, borderRightRadius	border-right-radius	radii
roundedTop, borderTopRadius	border-top-radius	radii
roundedBottom, borderBottomRadius	border-bottom-radius	radii
roundedStart, borderStartRadius	border-start-start-radius, border-end-start-radius	radii
roundedEnd, borderEndRadius	border-start-end-radius, border-end-end-radius	radii

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

Prop	CSS Property	Token Category
roundedTopLeft,borderTopLeftRadius	border-top-left-radius	radii
roundedTopRight,borderTopRight	border-top-right-radius	radii
roundedBottomRight,borderBottomRight	border-bottom-right-radius	radii
roundedBottomLeft,borderBottomLeft	border-bottom-left-radius	radii

Border Width

All sides

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

Chakra applies borderStyle: solid and a global border color by default. Specifying a border width is sufficient to apply the border.

<Box borderWidth="1px" />

Prop	CSS Property	Token Category
borderWidth	border-width	borderWidths

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

Prop	CSS Property	Token Category
borderTopWidth	border-top-width	borderWidths
borderLeftWidth	border-left-width	borderWidths
borderRightWidth	border-right-width	borderWidths
borderBottomWidth	border-bottom-width	borderWidths
borderStartWidth , borderInlineStartWidth	border-{start+end}-width
borderEndWidth , borderInlineEndWidth	border-{start+end}-width
borderXWidth , borderInlineWidth	border-{left,right}-width	borderWidths
borderYWidth , borderBlockWidth	border-{top,bottom}-width	borderWidths

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" />

Prop	CSS Property	Token Category
borderColor	border-color	colors
borderTopColor	border-top-color	colors
borderLeftColor	border-left-color	colors
borderRightColor	border-right-color	colors
borderBottomColor	border-bottom-color	colors
borderStartColor , borderInlineStartColor	border-{start,end}-color	colors
borderEndColor , borderInlineEndColor	border-{start,end}-color	colors
borderXColor, borderInlineColor	border-inline-color	colors
borderYColor, borderBlockColor	border-block-color	colors

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>

Prop	CSS Property	Token Category
divideWidth	border-{inline,block}-start-width	borderWidths

Divide Color

Use the divideColor prop to apply border color between elements.

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

Prop	CSS Property	Token Category
divideColor	--divide-color	colors

Divide Style

Use the divideStyle prop to apply border style between elements.

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

Prop	CSS Property	Token Category
divideStyle	--divide-style	borderStyle