보더 단축

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

형식

b{크기}{단위}{스타일}{HEX6}

전체 보더

클래스	CSS
`b1pxsolidDDDDDD`	border: 1px solid #DDDDDD
`b2pxsolidFF0000`	border: 2px solid #FF0000
`b1pxdashed999999`	border: 1px dashed #999999
`bn`	border: none

방향별 보더

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

접두사	방향	예시	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

보더 스타일

키워드	CSS
`solid`	solid
`dashed`	dashed
`dotted`	dotted
`double`	double

사용 예시

<!-- 기본 보더 -->
<div class="b1pxsolidDDDDDD br8px p2rem">기본 카드</div>

<!-- 왼쪽 액센트 보더 -->
<div class="bl3pxsolid6366F1 p12px">인용문 스타일</div>

<!-- 하단 구분선 -->
<div class="bb1pxsolid27272A pb16px mb16px">섹션</div>

<!-- 보더 없음 -->
<button class="bn bg6366F1 cFFFFFF p12px br8px">버튼</button>