Border radius generator
Per-corner and elliptical radii with a live preview.
FreeRuns in your browserNo signupUpdated 2026-10-29
Percentages are relative to the box size, so 50% on every corner makes an ellipse.
Preview
.box {
border-radius: 24px;
}rounded-[24px]
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This border radius generator rounds each corner of a box separately and shows the result live. Use pixels or percentages, turn on elliptical corners for organic shapes, and the output is the shortest valid border-radius shorthand plus a Tailwind arbitrary class. Quick buttons set every corner at once for the common cases: square, 8px, 16px, 24px and a full pill.
How to use it
- Choose px or % and drag the four corner sliders.
- Or press one of the quick buttons to set every corner to the same value at once.
- Tick Elliptical corners to get a second slider per corner for the vertical radius.
- Watch the blue box on the right. It is 192px tall and up to 288px wide, so percentages are easy to judge.
- Copy the CSS rule or the Tailwind class.
How to read the result
Set all four corners to 24px and the output is simply border-radius: 24px;. Change the top two to 24px and the bottom two to 0 and the generator writes border-radius: 24px 24px 0 0;, the four-value form. Set the top left and bottom right to 24px and the other pair to 8px and it collapses to 24px 8px, because the two-value form already means that.
Elliptical corners read differently. border-radius: 50% / 30%; means every corner's horizontal radius is half the width while its vertical radius is 30% of the height. On a wide box that produces a flattened oval; on a tall box it produces an egg. The same shape in pixels, say 120px 60px / 40px 80px, is how the "blob" backgrounds popular on landing pages are drawn with no image at all.
Percentages depend on the box's own size, so a card at 50% looks different at every breakpoint. Pixels keep the curve identical everywhere, which is usually what buttons and cards need.
Combine the radius with a shadow from the box shadow generator. If you need the whole component library designed, see website design and development.
Questions
Frequently asked.
What order do the four values go in?
Top left, top right, bottom right, bottom left, clockwise from the top left. With two values the first covers top left and bottom right, the second covers the other pair. The generator writes the shortest form that still means the same thing.
What does the slash in border-radius do?
Values before the slash set the horizontal radius of each corner and values after it set the vertical radius. Different numbers give an elliptical corner instead of a circular one, which is how blob shapes and pill ends that are taller than they are wide get made.
Why does a huge radius like 999px make a pill?
When the radius is larger than half the box's shortest side, the browser scales all radii down until they fit. The short sides become full semicircles and the long sides stay straight, which gives a pill. Any big number works; 999px and 9999px are just conventions.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide