边框

边框圆角

所有边

使用rounded 或 borderRadius 属性来应用元素所有边的边框圆角。

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

属性	CSS 属性	令牌类别
rounded, borderRadius	border-radius	radii

特定边

使用 rounded{Left,Right,Top,Bottom} 或 border{Left,Right,Top,Bottom}Radius 属性，为元素的特定边应用边框圆角。

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

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

使用逻辑等价属性，使边框圆角根据文本方向进行调整。

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

属性	CSS 属性	令牌类别
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

特定角

使用 border{Top,Bottom}{Left,Right}Radius 属性，或其简写形式来圆化特定角。

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

使用逻辑属性，根据文本方向进行调整。

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

属性	CSS 属性	令牌类别
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

边框宽度

所有边

使用 borderWidth 属性来应用元素所有边的边框宽度。

Chakra 默认应用 borderStyle: solid 和全局边框颜色。指定边框宽度足以应用边框。

<Box borderWidth="1px" />

属性	CSS 属性	令牌类别
borderWidth	border-width	borderWidths

特定边

使用 border{Left|Right|Top|Bottom}Width 属性，为元素的特定边应用边框宽度。

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

使用逻辑等价属性，使边框宽度根据文本方向进行调整。

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

属性	CSS 属性	令牌类别
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

边框颜色

所有边

使用 borderColor 属性来应用元素所有边的边框颜色。

<Box borderColor="red.400" />

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

特定边

使用 border{Left,Right,Top,Bottom}Color 属性，为元素的特定边应用边框颜色。

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

使用逻辑属性，根据文本方向进行调整。

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

属性	CSS 属性	令牌类别
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{X,Y}Width 属性来应用元素之间的边框宽度。它使用 CSS 选择器 > * + * 来应用 border* 属性。

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

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

属性	CSS 属性	令牌类别
divideWidth	border-{inline,block}-start-width	borderWidths

分隔颜色

使用 divideColor 属性来应用元素之间的边框颜色。

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

属性	CSS 属性	令牌类别
divideColor	--divide-color	colors

分隔样式

使用 divideStyle 属性来应用元素之间的边框样式。

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

属性	CSS 属性	令牌类别
divideStyle	--divide-style	borderStyle