Border Radius

Border radius tokens and their usage.

Scale

none

0px

default

2xl

1rem

full

9999px

Usage guidelines

Variant	When to use
`rounded-sm`	Subtle rounding — tags, small badges, inline elements
`rounded-md`	Buttons and inputs — the default interactive element radius
`rounded-lg`	Cards and panels — content containers with clear boundaries
`rounded-xl`	Modals and dialogs — prominent overlays that need softer edges
`rounded-full`	Avatars and badges — fully circular elements

html

1 <button class="rounded-md bg-primary px-4 py-2">Action</button>
2 <div class="rounded-lg border p-6">Card content</div>
3 <img class="rounded-full" src="avatar.jpg" alt="User" />

3 lines of html code

The base radius token (--radius) can be adjusted per-theme to shift the entire system between sharp and soft aesthetics without touching individual components.

1	<button class="rounded-md bg-primary px-4 py-2">Action</button>
2	<div class="rounded-lg border p-6">Card content</div>
3	<img class="rounded-full" src="avatar.jpg" alt="User" />