AAtomic CSS

border-bottom-width

요소 하단 테두리의 두께만 개별적으로 설정합니다. 테이블 행 구분선, 활성 탭 인디케이터, 밑줄 효과 등에 가장 많이 사용됩니다.

클래스 목록

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

클래스CSS설명
bbw1pxborder-bottom-width: 1px하단 border 두께 1px
bbw2pxborder-bottom-width: 2px하단 border 두께 2px
bbw3pxborder-bottom-width: 3px하단 border 두께 3px
bbw4pxborder-bottom-width: 4px하단 border 두께 4px

시각적 비교

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

1px — bbw1px

1px

2px — bbw2px

2px

3px — bbw3px

3px

4px — bbw4px

4px

사용 예시

<!-- 테이블 행 하단 구분선 -->
<div class="bbw1px bb1pxsolid27272A py12px cFAFAFA">Row 1</div>
<div class="bbw1px bb1pxsolid27272A py12px cFAFAFA">Row 2</div>
<div class="py12px cFAFAFA">Row 3 (마지막)</div>

<!-- 활성 탭 하단 인디케이터 -->
<div class="df gap2rem">
  <div class="bbw2px bb1pxsolid6366F1 py8px cFAFAFA fw600">활성</div>
  <div class="py8px c71717A">비활성</div>
  <div class="py8px c71717A">비활성</div>
</div>

<!-- 전체 border + 하단만 강조 -->
<div class="b1pxsolid27272A bbw3px p2rem br8px cFAFAFA">
  하단만 두꺼운 border
</div>

팁 & 주의사항

탭 인디케이터 패턴

활성 탭에 bbw2px를 적용하고 비활성 탭에는 border 없이 두면, 깔끔한 탭 UI를 만들 수 있습니다.

border-style 필수

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

border-widthborderborder-radius