Radius

둥글기는 r 뒤에 px 값을 붙인 스케일로 적어요. 요소 크기에 맞춰 고르고, 원하는 값이 없으면 추가 가이드를 보고 더하세요.

사용 예시

스케일

r 뒤의 숫자가 px이에요. 둥글기가 없으면 rounded-none, pill과 원은 rounded-full이에요.

r10

r12

r14

r16

r20

r24

tsx

<div className="rounded-r2" /><div className="rounded-r4" /><div className="rounded-r6" /><div className="rounded-r8" /><div className="rounded-r10" /><div className="rounded-r12" /><div className="rounded-r14" /><div className="rounded-r16" /><div className="rounded-r20" /><div className="rounded-r24" />

요소 크기

카드 같은 큰 요소는 r12, 컨트롤은 높이가 달라도 r8, 배지 같은 작은 표시는 r4예요.

주문 상세2026-08-27

큰 요소 r12

컨트롤 r8

신고작은 표시 r4

전체pill full

tsx

<div className="card rounded-r12 p-4">주문 상세</div><Button color="neutral" emphasis="outline">저장</Button><Badge shape="square">신고</Badge><span className="rounded-full px-3">전체</span>

플로팅 요소

컴포넌트마다 값이 정해져 있어요. DropdownMenu, Select, Combobox의 목록은 r12예요.

정렬최근 수정 순

Popover r16

이름 바꾸기

복제

DropdownMenu r12

복사했어요

Tooltip r12

파일을 저장했어요

Toast r8

기록을 지울까요?

되돌릴 수 없어요.

Dialog r20

tsx

<div className="float rounded-r16 p-4">정렬</div><div className="float rounded-r12 p-1">이름 바꾸기</div><div className="float rounded-r12 text-caption px-3 py-1">복사했어요</div><div className="float rounded-r8 flex items-center gap-stack p-4">파일을 저장했어요</div><div className="float rounded-r20 flex flex-col gap-stack p-6">기록을 지울까요?</div>

겹침

권장

안쪽은 바깥에서 padding을 뺀 값이에요. r12에 padding 4px이면 r8이에요.

지양

안팎이 같은 값이면 안쪽이 더 둥글어 보여요.

추가 가이드

새 값 더하기

스케일에 없는 값은 r 뒤에 px를 붙인 이름으로 더해요.

css

@theme {  --radius-r18: 18px; /* rounded-r18 */}

명세

둥글기

둥글기
이름	값	설명
rounded-none	0
rounded-r2	2px
rounded-r4	4px	Badge의 square, Checkbox, Kbd
rounded-r6	6px	SegmentedControl 항목
rounded-r8	8px	컨트롤, 메뉴 항목, Toast
rounded-r10	10px	SegmentedControl 바깥
rounded-r12	12px	frame, card, 메뉴 목록, Tooltip
rounded-r14	14px
rounded-r16	16px	Popover
rounded-r20	20px	Dialog, BottomSheet의 위쪽
rounded-r24	24px
rounded-full	무한	Switch, Toggle, pill, Avatar