보더 단축

보더는 크기, 단위, 스타일, 색상을 한 클래스에 조합하여 사용합니다.

형식

b{size}{unit}{style}{HEX6}

전체 보더

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`b1pxsolidDDDDDD`	border: 1px solid #DDDDDD
`b2pxsolidFF0000`	border: 2px solid #FF0000
`b1pxdashed999999`	border: 1px dashed #999999
`bn`	border: none

방향별 보더

b 뒤에 방향 약어를 붙입니다:

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">접두사	방향	예시	CSS
`bt`	top	`bt2pxdashed000000`	border-top: 2px dashed #000000
`br`	right	`br1pxsolid1e1e2e`	border-right: 1px solid #1E1E2E
`bb`	bottom	`bb1pxsolid27272a`	border-bottom: 1px solid #27272A
`bl`	left	`bl3pxsolid6366f1`	border-left: 3px solid #6366F1

보더 스타일

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">키워드	CSS
`solid`	solid
`dashed`	dashed
`dotted`	dotted
`double`	double

사용 예시

<!-- Default border -->
<div class="b1pxsolidDDDDDD br8px p2rem">Default card</div>

<!-- Left accent border -->
<div class="bl3pxsolid6366F1 p12px">Blockquote style</div>

<!-- Bottom divider -->
<div class="bb1pxsolid27272A pb16px mb16px">Section</div>

<!-- No border -->
<button class="bn bg6366F1 cFFFFFF p12px br8px">Button</button>