Set each corner's radius with sliders and get the matching Tailwind classes — core rounded-* names when values sit on the scale, arbitrary values when they don't — plus plain CSS.
Generated locally in your browser — your colors, settings and code never leave this page.
Corners, per corner
Uniform radius is one class; asymmetric corners are four — and remembering whether 12px is rounded-lg or rounded-xl breaks flow. Drag a slider per corner: equal values collapse to a single class, unequal values emit per-corner classes, and anything off the core scale becomes a precise arbitrary value. The plain-CSS output mirrors whatever the classes say.
Worked example
<!-- pill-top card -->
<div class="rounded-tl-3xl rounded-tr-3xl"></div>
/* CSS */
border-radius: 24px 24px 0 0;Patterns worth knowing
- Tabs: radius on top corners only.
- Speech bubbles: three round corners, one flat (the “Speech” preset).
- Leaf/petal shapes: opposite corners round, the others flat.
v4 note
- The scale shifted one step in v4 (rounded-sm → rounded-xs, rounded → rounded-sm). The pixel values are identical — the v3→v4 converter renames on sight.
Limitations
- This tool speaks circular pixel radii — for elliptical 8-value organic shapes, the CSS Border Radius Generator is the blob specialist.
How to use the Tailwind Border Radius Generator
- Drag a slider per corner — equal values produce one class, unequal values per-corner classes.
- Watch the preview shape update.
- Copy the Tailwind classes or the plain-CSS border-radius.
Frequently asked questions
When do I get named classes vs arbitrary values?
Values on the core scale (0, 2, 4, 6, 8, 12, 16, 24px, full) map to rounded-sm/md/lg/xl/2xl/3xl; anything else becomes rounded-[17px]. Both are idiomatic — named classes just theme better.
Did the rounded scale change in v4?
Yes — one step down: v3's rounded-sm is v4's rounded-xs and bare rounded became rounded-sm. The v3 to v4 Converter handles the rename; the values themselves are unchanged.
How do I make one side flat, like a tab?
Zero the corners on that side — the "Pill top" preset shows the pattern (rounded-t-3xl with a flat bottom). Per-corner classes compose freely.
