테두리
테두리 (Border)
테두리와 테두리 반경을 스타일링하는 JSX 스타일 prop을 알려드려요. 모든 면 또는 특정 면, 모서리를 원하는 대로 조절할 수 있어요.
출처: 문서
본문
Border Radius
모든 면
rounded 또는 borderRadius prop을 사용해서 요소의 모든 면에 테두리 반경을 적용하세요.
<Box borderRadius="md" />
<Box rounded="md" /> // shorthand
| Prop | CSS Property | Token Category |
|---|---|---|
rounded, borderRadius |
border-radius |
radii |
특정 면
rounded{Left,Right,Top,Bottom} 또는 border{Left,Right,Top,Bottom}Radius prop을 사용해서 요소의 특정 면에 테두리 반경을 적용하세요.
<Box borderTopRadius="md" />
<Box roundedTop="md" /> // shorthand
<Box borderLeftRadius="md" />
<Box roundedLeft="md" /> // shorthand
텍스트 방향에 따라 테두리 반경이 적응하도록 논리적(logical) 동등물을 사용하세요.
<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 |
특정 모서리
border{Top,Bottom}{Left,Right}Radius 속성이나 그 축약형 동등물을 사용해서 특정 모서리를 둥글게 하세요.
<Box borderTopLeftRadius="md" />
<Box roundedTopLeft="md" /> // shorthand
텍스트 방향에 따라 적응하도록 논리적 속성을 사용하세요.
<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
모든 면
borderWidth prop을 사용해서 요소의 모든 면에 테두리 너비를 적용하세요.
Chakra는 기본적으로
borderStyle: solid와 전역 테두리 색상을 적용해요. 테두리 너비만 지정해도 테두리가 적용되기에 충분해요.
<Box borderWidth="1px" />
| Prop | CSS Property | Token Category |
|---|---|---|
borderWidth |
border-width |
borderWidths |
특정 면
border{Left|Right|Top|Bottom}Width prop을 사용해서 요소의 특정 면에 테두리 너비를 적용하세요.
<Box borderTopWidth="1px" />
<Box borderLeftWidth="1px" />
텍스트 방향에 따라 테두리 너비가 적응하도록 논리적 동등물을 사용하세요.
<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
모든 면
borderColor prop을 사용해서 요소의 모든 면에 테두리 색상을 적용하세요.
<Box borderColor="red.400" />
// with opacity modifier
<Box borderColor="red.400/20" />
특정 면
border{Left,Right,Top,Bottom}Color prop을 사용해서 요소의 특정 면에 테두리 색상을 적용하세요.
<Box borderTopColor="red.400" />
<Box borderLeftColor="red.400" />
텍스트 방향에 따라 적응하도록 논리적 속성을 사용하세요.
<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
divide{X,Y}Width prop을 사용해서 요소 사이에 테두리 너비를 적용하세요. CSS 선택자 > * + *를 사용해서 border* 속성을 적용해요.
<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
divideColor prop을 사용해서 요소 사이에 테두리 색상을 적용하세요.
<Box divideColor="red.400">
<Box>1</Box>
<Box>2</Box>
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
divideColor |
--divide-color |
colors |
Divide Style
divideStyle prop을 사용해서 요소 사이에 테두리 스타일을 적용하세요.
<Box divideX="2px" divideStyle="dashed">
<Box>1</Box>
<Box>2</Box>
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
divideStyle |
--divide-style |
borderStyle |