AAtomic CSS

border-top-width

요소 상단 테두리의 두께만 개별적으로 설정합니다. 섹션 구분선, 탭 상단 인디케이터, 카드 상단 액센트 등에 활용합니다.

클래스 목록

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

클래스CSS설명
btw1pxborder-top-width: 1px상단 border 두께 1px
btw2pxborder-top-width: 2px상단 border 두께 2px
btw3pxborder-top-width: 3px상단 border 두께 3px
btw4pxborder-top-width: 4px상단 border 두께 4px

시각적 비교

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

1px — btw1px

1px

2px — btw2px

2px

3px — btw3px

3px

4px — btw4px

4px

사용 예시

<!-- 카드 상단 액센트 -->
<div class="btw3px bt1pxsolid6366F1 p2rem bg18181B br4px cFAFAFA">
  상단에 3px 인디케이터
</div>

<!-- 활성 탭 상단 표시 -->
<div class="df gap0px">
  <div class="btw2px bt1pxsolid6366F1 py8px px16px bg18181B cFAFAFA">활성 탭</div>
  <div class="py8px px16px bg0F0F17 c71717A">비활성 탭</div>
</div>

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

팁 & 주의사항

border-style 필수

btw{N}px만 단독 사용하면 border가 보이지 않습니다. border-style이 none(기본값)이기 때문입니다. border 단축 클래스나 별도의 style 클래스와 함께 사용하세요.

border 단축 클래스와 조합

전체 border를 설정한 뒤 상단만 두께를 변경할 수 있습니다. 예: b1pxsolid27272A btw3px로 상단만 강조합니다.

border-widthborderborder-radius