border-radius

<!-- 왼쪽 위 모서리만 둥글게 -->
<div class="btlr12px bg18181B p2rem">
  왼쪽 위만 둥근 요소
</div>

<!-- 탭 메뉴 - 왼쪽 첫 번째 탭 -->
<div class="df">
  <button class="btlr8px bg6366F1 cFFFFFF py8px px2rem bn">첫 번째</button>
  <button class="bg27272A cA1A1AA py8px px2rem bn">두 번째</button>
</div>

<!-- 카드 왼쪽 위 강조 -->
<div class="btlr2rem bg18181B b1pxsolid27272A p2rem">
  btlr2rem = 20px 둥글림
</div>

<!-- 오른쪽 위 모서리만 둥글게 -->
<div class="btrr12px bg18181B p2rem">
  오른쪽 위만 둥근 요소
</div>

<!-- 탭 메뉴 - 오른쪽 마지막 탭 -->
<div class="df">
  <button class="bg27272A cA1A1AA py8px px2rem bn">첫 번째</button>
  <button class="btrr8px bg6366F1 cFFFFFF py8px px2rem bn">마지막</button>
</div>

<!-- 말풍선 (오른쪽 위 꺾임) -->
<div class="btrr0 btlr12px bblr12px bbrr12px bg6366F1 cFFFFFF p16px">
  오른쪽 위만 각진 말풍선
</div>

<!-- 왼쪽 아래 모서리만 둥글게 -->
<div class="bblr12px bg18181B p2rem">
  왼쪽 아래만 둥근 요소
</div>

<!-- 카드 푸터 왼쪽 -->
<div class="bg18181B b1pxsolid27272A">
  <div class="p2rem">카드 콘텐츠</div>
  <div class="bblr8px bg27272A p16px">
    왼쪽 아래만 둥근 푸터
  </div>
</div>

<!-- 계단형 레이아웃 -->
<div class="bblr2rem bg6366F1 cFFFFFF p2rem">
  bblr2rem = 20px 둥글림
</div>

<!-- 오른쪽 아래 모서리만 둥글게 -->
<div class="bbrr12px bg18181B p2rem">
  오른쪽 아래만 둥근 요소
</div>

<!-- 카드 푸터 오른쪽 -->
<div class="bg18181B b1pxsolid27272A">
  <div class="p2rem">카드 콘텐츠</div>
  <div class="bbrr8px bg27272A p16px tar">
    오른쪽 아래만 둥근 푸터
  </div>
</div>

<!-- 대각선 강조 -->
<div class="bbrr2rem bg6366F1 cFFFFFF p2rem">
  bbrr2rem = 20px 둥글림
</div>

<!-- 카드 헤더 (상단만 둥글게) -->
<div class="btlr12px btrr12px bg6366F1 cFFFFFF p16px fw600">
  카드 헤더
</div>
<div class="bblr12px bbrr12px bg18181B p2rem b1pxsolid27272A">
  카드 본문 (하단만 둥글게)
</div>

<!-- 왼쪽만 둥근 사이드 패널 -->
<div class="btlr16px bblr16px bg18181B b1pxsolid27272A p2rem">
  사이드 패널
</div>

<!-- 대각선 둥글림 -->
<div class="btlr2rem bbrr2rem bg6366F1 cFFFFFF p2rem tac">
  대각선 패턴
</div>

<!-- 아바타 (원형) -->
<div class="w6rem h6rem br50p bg6366F1 df jcc aic cFFFFFF fw600">
  AB
</div>

<!-- 상태 인디케이터 -->
<span class="dib w12px h12px br50p bg34D399"></span>

<!-- 다양한 크기의 원형 -->
<div class="df aic gap16px">
  <div class="w4rem h4rem br50p bg6366F1"></div>
  <div class="w6rem h6rem br50p bg34D399"></div>
  <div class="w8rem h8rem br50p bgFBBF24"></div>
</div>

<!-- 필 형태 버튼 -->
<button class="bg6366F1 cFFFFFF py8px px2-4rem br9999px bn cp fs14px fw600">
  Get Started
</button>

<!-- 필 형태 태그 -->
<span class="dib bg27272A cFAFAFA py4px px12px br9999px fs12px">
  New Feature
</span>

<!-- 필 형태 입력 필드 -->
<input class="py8px px2rem br9999px bg18181B b1pxsolid27272A cFAFAFA fs14px w100p" placeholder="검색..." />

<!-- 상속된 radius 리셋 -->
<div class="br8px bg18181B p2rem">
  <p>부모는 br8px</p>
  <div class="br0 bg27272A p16px mt12px">
    자식은 br0으로 리셋 → border-radius: 0
  </div>
</div>

<!-- br0 vs brn 차이 -->
<!-- br0 = border-radius: 0 (radius 리셋) -->
<!-- brn = border-right: 0 (오른쪽 테두리 제거) -->