border-radius

Rounds element corners. br0 resets border-radius to 0. brn is border-right: 0, do not confuse.

Class List

Class	CSS	Description
`br0`	border-radius: 0	border-radius reset
`br4px`	border-radius: 4px	Subtle rounding. Input fields, small tags
`br8px`	border-radius: 8px	Standard rounding. Cards, buttons, modals
`br12px`	border-radius: 12px	Pronounced rounding. Large cards, panels
`br16px`	border-radius: 16px	Strong rounding. Large containers
`br2rem`	border-radius: 2rem (20px)	rem unit. Equal to 20px
`br50p`	border-radius: 50%	Circle on square elements. Avatars, indicators
`br9999px`	border-radius: 9999px	Pill shape. Fully rounded ends on wide elements
`btlr{n}`	border-top-left-radius: {n}	Top-left corner only
`btrr{n}`	border-top-right-radius: {n}	Top-right corner only
`bblr{n}`	border-bottom-left-radius: {n}	Bottom-left corner only
`bbrr{n}`	border-bottom-right-radius: {n}	Bottom-right corner only

Visual Comparison

Compares how various border-radius values affect elements.

None

br0

4px

br4px

8px

br8px

12px

br12px

16px

br16px

50%

br50p

Commonly Used Values

Commonly used border-radius values and use cases.

Class	Size	Usage
`br4px`	4px	미세한 둥글림 — 입력 필드, 인라인 코드, 작은 태그
`br8px`	8px	표준 둥글림 — 카드, 버튼, 드롭다운, 모달
`br12px`	12px	두드러진 둥글림 — 큰 카드, 이미지 컨테이너
`br50p`	50%	원형 — 아바타, 상태 인디케이터 (정사각형 필수)
`br9999px`	9999px	필(pill) — 태그, 뱃지, 버튼의 양끝 완전 둥글림

border-top-left-radius

Rounds top-left corner only. Use btlr prefix with unit value.

Class	CSS
`btlr4px`	border-top-left-radius: 4px
`btlr8px`	border-top-left-radius: 8px
`btlr12px`	border-top-left-radius: 12px
`btlr16px`	border-top-left-radius: 16px
`btlr2rem`	border-top-left-radius: 2rem (20px)
`btlr50p`	border-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

Rounds top-right corner only. Use btrr prefix with unit value.

Class	CSS
`btrr4px`	border-top-right-radius: 4px
`btrr8px`	border-top-right-radius: 8px
`btrr12px`	border-top-right-radius: 12px
`btrr16px`	border-top-right-radius: 16px
`btrr2rem`	border-top-right-radius: 2rem (20px)
`btrr50p`	border-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

Rounds bottom-left corner only. Use bblr prefix with unit value.

Class	CSS
`bblr4px`	border-bottom-left-radius: 4px
`bblr8px`	border-bottom-left-radius: 8px
`bblr12px`	border-bottom-left-radius: 12px
`bblr16px`	border-bottom-left-radius: 16px
`bblr2rem`	border-bottom-left-radius: 2rem (20px)
`bblr50p`	border-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

Rounds bottom-right corner only. Use bbrr prefix with unit value.

Class	CSS
`bbrr4px`	border-bottom-right-radius: 4px
`bbrr8px`	border-bottom-right-radius: 8px
`bbrr12px`	border-bottom-right-radius: 12px
`bbrr16px`	border-bottom-right-radius: 16px
`bbrr2rem`	border-bottom-right-radius: 2rem (20px)
`bbrr50p`	border-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>

Individual Corner Combinations

Combine corner classes for specific-side rounding. Used for card headers/footers, tabs, speech bubbles.

Top only rounded

btlr2rem btrr2rem

Bottom only rounded

bblr2rem bbrr2rem

Left only rounded

btlr2rem bblr2rem

Right only rounded

btrr2rem bbrr2rem

Diagonal (↘)

btlr2rem bbrr2rem

Diagonal (↙)

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>

Circle Pattern

br50p on a square creates a circle. Used for avatars, status indicators.

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

Circle preview

40px

60px

80px

100px

Pill Shape

Very large border-radius on a wide element creates a pill shape. Use 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 shape preview

Pill 버튼태그뱃지

br0 vs brn distinction

br0 is border-radius: 0, brn is border-right: 0. Do not confuse.

br0

br0 = border-radius: 0

brn

brn = border-right: 0

Usage	Class	CSS
border-radius 리셋	`br0`	border-radius: 0
border-right 제거	`brn`	border-right: 0
border 전체 제거	`bn`	border: 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) -->

Tips & Notes

Square + br50p = circle

br50p requires square element for perfect circle. Different ratios produce ellipse.

Use consistent radius across UI

Use 2-3 values like br4px, br8px, br12px consistently for design coherence.

Reset inherited radius with br0

Reset inherited border-radius to 0 with br0.

border border-width box-shadow width height