AAtomic CSS

border-right-width

요소 우측 테두리의 두께만 개별적으로 설정합니다. 사이드바 구분선, 수직 디바이더, 네비게이션 경계 등에 활용합니다.

클래스 목록

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
brw1pxborder-right-width: 1px우측 border 두께 1px
brw2pxborder-right-width: 2px우측 border 두께 2px
brw3pxborder-right-width: 3px우측 border 두께 3px
brw4pxborder-right-width: 4px우측 border 두께 4px

시각적 비교

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

1px — brw1px

1px

2px — brw2px

2px

3px — brw3px

3px

4px — brw4px

4px

사용 예시

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

<!-- Vertical divider -->
<div class="df aic gap2rem">
  <span class="cFAFAFA">Item A</span>
  <span class="brw2px br1pxsolid27272A h2rem"></span>
  <span class="cFAFAFA">Item B</span>
</div>

팁 &amp; 주의사항

border-style 필수

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

RTL 레이아웃 주의

RTL(Right-to-Left) 레이아웃에서는 brw가 시각적으로 왼쪽에 나타날 수 있습니다. 논리적 속성이 필요하면 별도 처리가 필요합니다.

border-widthborderborder-radius