边框

边框半径

¥Border Radius

所有边

¥All sides

使用 rounded 或 borderRadius 属性在元素的所有边上应用边框半径。

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

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

属性	CSS 属性	标记类别
rounded, borderRadius	border-radius	radii

特定边

¥Specific sides

使用 rounded{Left,Right,Top,Bottom} 或 border{Left,Right,Top,Bottom}Radius 属性在元素的特定侧应用边框半径。

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

属性	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

特定角

¥Specific corners

使用 border{Top,Bottom}{Left,Right}Radius 属性或等效的简写形式将特定角设为圆角。

¥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

属性	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

边框宽度

¥Border Width

所有边

¥All sides

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

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

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

<Box borderWidth="1px" />

属性	CSS 属性	标记类别
borderWidth	border-width	borderWidths

特定边

¥Specific sides

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

¥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

属性	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

边框颜色

¥Border Color

所有边

¥All sides

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

¥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

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

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

属性	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 Width

使用 divide{X,Y}Width 属性在元素之间应用边框宽度。它会使用 CSS 选择器 > * + * 来应用 border* 属性。

¥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>

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

分隔符颜色

¥Divide Color

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

¥Use the divideColor prop to apply border color between elements.

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

属性	CSS 属性	标记类别
divideColor	--divide-color	colors

分隔符样式

¥Divide Style

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

¥Use the divideStyle prop to apply border style between elements.

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

属性	CSS 属性	标记类别
divideStyle	--divide-style	borderStyle