AAtomic CSS

border-left-width

요소 좌측 테두리의 두께만 개별적으로 설정합니다. 인용문 왼쪽 바, 카테고리 표시, 사이드 인디케이터 등에 활용합니다.

클래스 목록

패턴 기반 클래스입니다. blw{N}px 형식으로 숫자와 단위를 조합하여 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
blw1pxborder-left-width: 1px좌측 border 두께 1px
blw2pxborder-left-width: 2px좌측 border 두께 2px
blw3pxborder-left-width: 3px좌측 border 두께 3px
blw4pxborder-left-width: 4px좌측 border 두께 4px

시각적 비교

다양한 border-left-width 값을 시각적으로 비교합니다.

1px — blw1px

1px

2px — blw2px

2px

3px — blw3px

3px

4px — blw4px

4px

사용 예시

<!-- Blockquote left bar -->
<blockquote class="blw4px bl1pxsolid6366F1 pl16px py8px cA1A1AA fs14px lh1-7">
  Good code is its own best documentation.
</blockquote>

<!-- Category indicators -->
<div class="blw4px bl1pxsolid34D399 pl12px py4px cFAFAFA fs14px mb8px">Success</div>
<div class="blw4px bl1pxsolidFBBF24 pl12px py4px cFAFAFA fs14px mb8px">Warning</div>
<div class="blw4px bl1pxsolidEF4444 pl12px py4px cFAFAFA fs14px">Error</div>

<!-- Full border + emphasized left only -->
<div class="b1pxsolid27272A blw4px p2rem br8px cFAFAFA">
  Thicker border only on left
</div>

팁 &amp; 주의사항

인용문 패턴

blw4px와 색상을 조합하면 인용문이나 알림 카드의 좌측 바를 만들 수 있습니다. border 단축 클래스 bl4pxsolid6366F1이 더 간편합니다.

border-style 필수

blw{N}px만 단독 사용하면 border가 보이지 않습니다. border 단축 클래스나 별도의 style 클래스와 함께 사용하세요.

border-widthborderborder-radius