보더
보더 관련 기본 속성입니다. 보더 단축 패턴은 보더 단축 페이지를 참고하세요.
Border None
btn, bbn, bln 등은 btn이 button의 약어로 흔히 사용되는 등 다른 클래스명과의 충돌 가능성을 고려하여 지원하지 않습니다. 방향별 보더 제거는 보더 단축에서 b1pxsolidtransparent 등을 활용하세요.
Border Radius
프리픽스: br + 숫자 + 단위. br0으로 border-radius를 0으로 리셋할 수 있습니다. brn은 border-right: 0이므로 혼동하지 마세요.
| 클래스 | CSS |
|---|
br0 | border-radius: 0 |
br4px | border-radius: 4px |
br8px | border-radius: 8px |
br12px | border-radius: 12px |
br50p | border-radius: 50% |
br2rem | border-radius: 2rem |
Border Width
| 프리픽스 | 속성 | 예시 |
|---|
bw | border-width | bw1px, bw2px |
btw | border-top-width | btw1px |
brw | border-right-width | brw2px |
bbw | border-bottom-width | bbw1px |
blw | border-left-width | blw2px |
bs | border-spacing | bs2px |
Border Color
프리픽스: bc + HEX6
bcDDDDDD → border-color: #DDDDDD bc6366f1 → border-color: #6366F1
Outline
| 클래스 | CSS |
|---|
oln | outline: none |
olss | outline-style: solid |
olsd | outline-style: dashed |
olsdt | outline-style: dotted |
olsdb | outline-style: double |
olsg | outline-style: groove |
olsr | outline-style: ridge |
olsi | outline-style: inset |
olso | outline-style: outset |
olsn | outline-style: none |
Outline Width / Offset
| 프리픽스 | 속성 | 예시 |
|---|
ow | outline-width | ow2px |
oo | outline-offset | oo4px |
Border Collapse
| 클래스 | CSS |
|---|
bcc | border-collapse: collapse |
bcs | border-collapse: separate |