AAtomic CSS

border-width

요소 테두리의 두께를 설정하는 속성입니다. border-style과 border-color와 함께 사용하거나, border 단축 클래스에 포함하여 사용합니다.

클래스 목록

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴CSS설명
bw{N}pxborder-width: {N}px모든 방향 border 두께
btw{N}pxborder-top-width: {N}px상단 border 두께
brw{N}pxborder-right-width: {N}px우측 border 두께
bbw{N}pxborder-bottom-width: {N}px하단 border 두께
blw{N}pxborder-left-width: {N}px좌측 border 두께

시각적 비교

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

1px — bw1px

1px

2px — bw2px

2px

3px — bw3px

3px

4px — bw4px

4px

방향별 border-width

특정 방향에만 border 두께를 적용할 수 있습니다.

top — btw3px

top

right — brw3px

right

bottom — bbw3px

bottom

left — blw3px

left

자주 사용하는 값

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS용도
bw1pxborder-width: 1pxGeneral borders, dividers
bw2pxborder-width: 2pxEmphasis borders, active state
bbw2pxborder-bottom-width: 2pxActive tab indicator
blw4pxborder-left-width: 4pxBlockquotes, category indicator bar
btw3pxborder-top-width: 3pxCard top accent

클래스별 상세

bw{N}pxborder-width

모든 방향의 border 두께를 한번에 설정합니다. border-style이 설정되어 있어야 두께가 보입니다. 보통 border 단축 클래스와 함께 쓰기보다는 개별적으로 두께만 조절할 때 사용합니다.

<!-- Set border width for all sides -->
<div class="bw2px b1pxsolid6366F1 p2rem br8px cFAFAFA">
  border-width: 2px (Full)
</div>

<!-- Change width on hover -->
<button class="bw1px hover-bw2px b1pxsolid27272A py8px px16px br8px bg18181B cFFFFFF cp tall200msease">
  Hover me
</button>

btw{N}pxborder-top-width

상단 border의 두께만 설정합니다. 섹션 구분선이나 탭 상단 인디케이터에 활용합니다.

<!-- Card top accent -->
<div class="btw3px bt1pxsolid6366F1 p2rem bg18181B br4px cFAFAFA">
  3px top indicator
</div>

<!-- Active tab top indicator -->
<div class="df gap0px">
  <div class="btw2px bt1pxsolid6366F1 py8px px16px bg18181B cFAFAFA">Active tab</div>
  <div class="py8px px16px bg0F0F17 c71717A">Inactive tab</div>
</div>

brw{N}pxborder-right-width

우측 border의 두께만 설정합니다. 사이드바 구분선이나 수직 디바이더에 활용합니다.

<!-- Sidebar right divider -->
<div class="df">
  <aside class="brw1px br1pxsolid27272A p2rem w25rem cA1A1AA">
    Sidebar
  </aside>
  <main class="p2rem fg1 cFAFAFA">
    Main Content
  </main>
</div>

bbw{N}pxborder-bottom-width

하단 border의 두께만 설정합니다. 테이블 행 구분, 활성 탭 인디케이터, 밑줄 효과에 가장 많이 사용됩니다.

<!-- Table row bottom divider -->
<div class="bbw1px bb1pxsolid27272A py12px cFAFAFA">Row 1</div>
<div class="bbw1px bb1pxsolid27272A py12px cFAFAFA">Row 2</div>
<div class="py12px cFAFAFA">Row 3 (Last)</div>

<!-- Active tab bottom indicator -->
<div class="df gap2rem">
  <div class="bbw2px bb1pxsolid6366F1 py8px cFAFAFA fw600">Active</div>
  <div class="py8px c71717A">Inactive</div>
  <div class="py8px c71717A">Inactive</div>
</div>

blw{N}pxborder-left-width

좌측 border의 두께만 설정합니다. 인용문 왼쪽 바, 카테고리 표시, 사이드 인디케이터에 활용합니다.

<!-- 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>

팁 &amp; 주의사항

border 단축 클래스 활용

두께 + 스타일 + 색상을 한번에 지정하려면 b1pxsolid27272A 같은 border 단축 클래스가 더 간편합니다. border-width 클래스는 기존 border의 두께만 변경할 때 사용하세요.

border-style 필수

bw{N}px만 단독 사용하면 border가 보이지 않습니다. border-style이 none(기본값)이기 때문입니다. 반드시 스타일과 함께 사용하세요.

box-sizing에 따른 크기 변화

bxzbb(border-box)가 아닌 경우, border 두께만큼 요소 전체 크기가 커집니다. 레이아웃 틀어짐을 방지하려면 bxzbb를 함께 사용하세요.

Shorthand 분해: bw(border-width)는 내부적으로 border-top/right/bottom/left-width 4방향으로 분해됩니다. bw2px blw0 사용 시 border-left-width만 0으로 정확히 덮어씁니다.

borderborder-radiusborder-collapseoutline