TailwindreadyTailwindready
Free tool

Border Radius Generator

Drag the sliders to round all four corners together or one at a time. The tool picks the closest Tailwind rounded-* class and falls back to an exact arbitrary value.

Unit
Tailwind classes
rounded-2xl
Raw CSS
border-radius: 16px;

Frequently asked questions

What are the Tailwind border radius values?

In Tailwind v4: rounded-xs is 2px, rounded-sm 4px, rounded-md 6px, rounded-lg 8px, rounded-xl 12px, rounded-2xl 16px, rounded-3xl 24px, rounded-4xl 32px, and rounded-full is a fully round shape.

How do I round only one corner in Tailwind?

Use a corner prefix: rounded-tl-lg for top left, rounded-tr-lg, rounded-br-lg and rounded-bl-lg. For two corners on one side use rounded-t-lg, rounded-r-lg, rounded-b-lg or rounded-l-lg.

How do I make a circle?

Give the element equal width and height and add rounded-full. Percent mode in this tool outputs rounded-full once you reach 50%.

Did rounded and rounded-sm change in Tailwind v4?

Yes. The old bare rounded class and rounded-sm were renamed, so what was rounded-sm in v3 is rounded-xs in v4 and what was rounded is now rounded-sm. This tool uses the v4 names.

Guides that go with this tool

More free Tailwind CSS tools

Contrast checkerWCAG contrast ratio with AA and AAA results and Tailwind classes.Glassmorphism generatorFrosted glass cards with backdrop blur, as Tailwind or CSS.Text shadow generatorLayered text shadows, glow and outline presets, as Tailwind or CSS.Fluid typography generatorA clamp() font size that scales between two viewport widths.Transition generatorPreview duration and easing, then copy the Tailwind classes.Color converterConvert between HEX, RGB, HSL and OKLCH with alpha support.

Browse all 24 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

Box shadow generatorGlassmorphism generatorBrowse components