AAtomic CSS

border-radius

요소의 모서리를 둥글게 만드는 속성입니다. br0으로 border-radius를 0으로 리셋할 수 있습니다. brn은 border-right: 0이므로 혼동하지 마세요.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
br0border-radius: 0border-radius 리셋
br4pxborder-radius: 4px미세한 둥글림. 입력 필드, 작은 태그
br8pxborder-radius: 8px표준 둥글림. 카드, 버튼, 모달
br12pxborder-radius: 12px두드러진 둥글림. 큰 카드, 패널
br16pxborder-radius: 16px강한 둥글림. 대형 컨테이너
br2remborder-radius: 2rem (20px)rem 단위. 20px과 동일
br50pborder-radius: 50%정사각형에 적용 시 원형. 아바타, 인디케이터
br9999pxborder-radius: 9999px필(pill) 형태. 가로 요소의 양쪽 끝을 완전히 둥글게
btlr{n}border-top-left-radius: {n}왼쪽 위 모서리만 개별 지정
btrr{n}border-top-right-radius: {n}오른쪽 위 모서리만 개별 지정
bblr{n}border-bottom-left-radius: {n}왼쪽 아래 모서리만 개별 지정
bbrr{n}border-bottom-right-radius: {n}오른쪽 아래 모서리만 개별 지정

시각적 비교

다양한 border-radius 값이 요소에 어떤 영향을 주는지 비교합니다.

없음

br0

4px

br4px

8px

br8px

12px

br12px

16px

br16px

50%

br50p

자주 사용하는 값

UI에서 자주 사용하는 border-radius 값과 용도입니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스크기용도
br4px4px미세한 둥글림 — 입력 필드, 인라인 코드, 작은 태그
br8px8px표준 둥글림 — 카드, 버튼, 드롭다운, 모달
br12px12px두드러진 둥글림 — 큰 카드, 이미지 컨테이너
br50p50%원형 — 아바타, 상태 인디케이터 (정사각형 필수)
br9999px9999px필(pill) — 태그, 뱃지, 버튼의 양끝 완전 둥글림

border-top-left-radius

왼쪽 위 모서리만 둥글게 만듭니다. 프리픽스 btlr 뒤에 단위 값을 붙여 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS
btlr4pxborder-top-left-radius: 4px
btlr8pxborder-top-left-radius: 8px
btlr12pxborder-top-left-radius: 12px
btlr16pxborder-top-left-radius: 16px
btlr2remborder-top-left-radius: 2rem (20px)
btlr50pborder-top-left-radius: 50%
btlr8px
btlr16px
btlr3-2rem
btlr50p
<!-- Round top-left corner only -->
<div class="btlr12px bg18181B p2rem">
  Element with rounded top-left only
</div>

<!-- Tab menu - first left tab -->
<div class="df">
  <button class="btlr8px bg6366F1 cFFFFFF py8px px2rem bn">First</button>
  <button class="bg27272A cA1A1AA py8px px2rem bn">Second</button>
</div>

<!-- Card top-left emphasis -->
<div class="btlr2rem bg18181B b1pxsolid27272A p2rem">
  btlr2rem = 20px Rounded
</div>

border-top-right-radius

오른쪽 위 모서리만 둥글게 만듭니다. 프리픽스 btrr 뒤에 단위 값을 붙여 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS
btrr4pxborder-top-right-radius: 4px
btrr8pxborder-top-right-radius: 8px
btrr12pxborder-top-right-radius: 12px
btrr16pxborder-top-right-radius: 16px
btrr2remborder-top-right-radius: 2rem (20px)
btrr50pborder-top-right-radius: 50%
btrr8px
btrr16px
btrr3-2rem
btrr50p
<!-- Round top-right corner only -->
<div class="btrr12px bg18181B p2rem">
  Element with rounded top-right only
</div>

<!-- Tab menu - last right tab -->
<div class="df">
  <button class="bg27272A cA1A1AA py8px px2rem bn">First</button>
  <button class="btrr8px bg6366F1 cFFFFFF py8px px2rem bn">Last</button>
</div>

<!-- Speech bubble (angled top-right) -->
<div class="btrr0 btlr12px bblr12px bbrr12px bg6366F1 cFFFFFF p16px">
  Speech bubble with angular top-right
</div>

border-bottom-left-radius

왼쪽 아래 모서리만 둥글게 만듭니다. 프리픽스 bblr 뒤에 단위 값을 붙여 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS
bblr4pxborder-bottom-left-radius: 4px
bblr8pxborder-bottom-left-radius: 8px
bblr12pxborder-bottom-left-radius: 12px
bblr16pxborder-bottom-left-radius: 16px
bblr2remborder-bottom-left-radius: 2rem (20px)
bblr50pborder-bottom-left-radius: 50%
bblr8px
bblr16px
bblr3-2rem
bblr50p
<!-- Round bottom-left corner only -->
<div class="bblr12px bg18181B p2rem">
  Element with rounded bottom-left only
</div>

<!-- Card footer left -->
<div class="bg18181B b1pxsolid27272A">
  <div class="p2rem">Card Content</div>
  <div class="bblr8px bg27272A p16px">
    Footer with rounded bottom-left only
  </div>
</div>

<!-- Staircase layout -->
<div class="bblr2rem bg6366F1 cFFFFFF p2rem">
  bblr2rem = 20px Rounded
</div>

border-bottom-right-radius

오른쪽 아래 모서리만 둥글게 만듭니다. 프리픽스 bbrr 뒤에 단위 값을 붙여 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS
bbrr4pxborder-bottom-right-radius: 4px
bbrr8pxborder-bottom-right-radius: 8px
bbrr12pxborder-bottom-right-radius: 12px
bbrr16pxborder-bottom-right-radius: 16px
bbrr2remborder-bottom-right-radius: 2rem (20px)
bbrr50pborder-bottom-right-radius: 50%
bbrr8px
bbrr16px
bbrr3-2rem
bbrr50p
<!-- Round bottom-right corner only -->
<div class="bbrr12px bg18181B p2rem">
  Element with rounded bottom-right only
</div>

<!-- Card footer right -->
<div class="bg18181B b1pxsolid27272A">
  <div class="p2rem">Card Content</div>
  <div class="bbrr8px bg27272A p16px tar">
    Footer with rounded bottom-right only
  </div>
</div>

<!-- Diagonal emphasis -->
<div class="bbrr2rem bg6366F1 cFFFFFF p2rem">
  bbrr2rem = 20px Rounded
</div>

개별 모서리 조합

개별 모서리 클래스를 조합하면 특정 방향만 둥글게 만들 수 있습니다. 카드 헤더/푸터, 탭, 말풍선 등에 활용합니다.

상단만 둥글게

btlr2rem btrr2rem

하단만 둥글게

bblr2rem bbrr2rem

왼쪽만 둥글게

btlr2rem bblr2rem

오른쪽만 둥글게

btrr2rem bbrr2rem

대각선 (↘)

btlr2rem bbrr2rem

대각선 (↙)

btrr2rem bblr2rem
<!-- Card header (rounded top only) -->
<div class="btlr12px btrr12px bg6366F1 cFFFFFF p16px fw600">
  Card header
</div>
<div class="bblr12px bbrr12px bg18181B p2rem b1pxsolid27272A">
  Card body (rounded bottom only)
</div>

<!-- Side panel with rounded left only -->
<div class="btlr16px bblr16px bg18181B b1pxsolid27272A p2rem">
  Side panel
</div>

<!-- Diagonal rounded -->
<div class="btlr2rem bbrr2rem bg6366F1 cFFFFFF p2rem tac">
  Diagonal pattern
</div>

원형 패턴

br50p를 정사각형 요소에 적용하면 완벽한 원이 됩니다. 아바타, 상태 인디케이터 등에 활용합니다.

<!-- Avatar (circle) -->
<div class="w6rem h6rem br50p bg6366F1 df jcc aic cFFFFFF fw600">
  AB
</div>

<!-- Status indicator -->
<span class="dib w12px h12px br50p bg34D399"></span>

<!-- Circles of various sizes -->
<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>

원형 미리보기

40px
60px
80px
100px

필(Pill) 형태

가로로 긴 요소에 매우 큰 border-radius를 적용하면 양쪽 끝이 완전히 둥근 필(pill) 형태가 됩니다. br9999px를 사용합니다.

<!-- Pill-shaped button -->
<button class="bg6366F1 cFFFFFF py8px px2-4rem br9999px bn cp fs14px fw600">
  Get Started
</button>

<!-- Pill-shaped tag -->
<span class="dib bg27272A cFAFAFA py4px px12px br9999px fs12px">
  New Feature
</span>

<!-- Pill-shaped input field -->
<input class="py8px px2rem br9999px bg18181B b1pxsolid27272A cFAFAFA fs14px w100p" placeholder="Search..." />

필 형태 미리보기

Pill 버튼태그뱃지

br0 vs brn 구분

br0은 border-radius: 0이고, brn은 border-right: 0입니다. 혼동하지 마세요.

br0

br0 = border-radius: 0

brn

brn = border-right: 0

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">용도클래스CSS
border-radius 리셋br0border-radius: 0
border-right 제거brnborder-right: 0
border 전체 제거bnborder: none
<!-- Reset inherited radius -->
<div class="br8px bg18181B p2rem">
  <p>Parent has br8px</p>
  <div class="br0 bg27272A p16px mt12px">
    Child uses br0 to reset → border-radius: 0
  </div>
</div>

<!-- br0 vs brn difference -->
<!-- br0 = border-radius: 0 (resets radius) -->
<!-- brn = border-right: 0 (removes right border) -->

팁 & 주의사항

정사각형 + br50p = 원

br50p는 정사각형 요소에 적용해야 완벽한 원이 됩니다. 가로/세로 비율이 다르면 타원이 됩니다.

UI 전체에서 일관된 radius 사용

프로젝트 전체에서 br4px, br8px, br12px 등 2~3가지 값을 일관되게 사용하면 디자인 통일성이 높아집니다.

br0으로 상속된 radius 리셋

부모나 다른 클래스에서 border-radius가 적용된 경우, br0으로 0으로 되돌릴 수 있습니다.

borderborder-widthbox-shadowwidthheight