How do I make a pill shape?

Click the “Pill” preset, or set all four corners to 999px (or 50% on an aspect-ratio square). Any value larger than half the element's height produces a pill.

Can I use percent units?

Yes — percent is great for elliptical corners or fully circular avatars (50% on a square element).

Why does the CSS sometimes show one value and other times four?

When all four corners are equal, the tool outputs the shorthand `border-radius: 24px;`. When they differ, it lists all four: `border-radius: 10px 20px 30px 40px;`.

Can I control corners independently?

Yes — toggle the Link button off, then each slider controls only its own corner.

Border Radius Generator

Drag sliders for each corner and copy clean border-radius CSS.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Border Radius Generator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Choose to keep corners linked (uniform) or unlink for per-corner control.
2
Step 2. Drag each corner slider or type a precise number in the input.
3
Step 3. Switch the unit between px, % and rem.
4
Step 4. Apply a quick preset (Sharp / Soft / Round / Pill) or copy the CSS.