Round each corner of a box with its own slider and see the shape live. Choose pixels, percent or rem, and you get a short border-radius line: one value when all four corners match, four values when they don't. It's the quickest way to find the pill, the leaf and the circle.
How to use it
- Move the sliders for each corner.
- Choose the unit.
- Watch the preview change.
- Copy the CSS.
When it helps
- Rounding cards, buttons and inputs.
- Making pills and circles.
- Designing unusual corner shapes.
- Matching a design file.
Good to know
- 50 percent on a square makes a circle, and a huge pixel value on a short element makes a pill.
- Percent radii scale with the element, pixel ones don't.
- Keep the same radius across a design so components feel related.
How rounding works
Border-radius takes up to four values, for the top left, top right, bottom right and bottom left corners. One value applies to all. If radii are too large for the box, browsers scale them down proportionally so they don't overlap.
Percent values refer to the box size, so 50 percent on a square gives a circle, and on a rectangle gives an ellipse.
Worked example: a pill button
For a pill, use a very large pixel value such as 999px, or 50 percent on a short element. The corners are limited to half the height, giving fully rounded ends. For a tab shape, round only the top two corners.
To make a leaf shape, set opposite corners to a large value and the others to zero.
Design consistency
Pick a small set of radii, perhaps 4, 8, 16 and full, and reuse them. Matching the radius of nested elements, with inner radius smaller than outer by the padding, makes layouts look polished.
Store radii as variables so you can change the style across a whole site.
Rounded corners in different contexts
Images need border-radius with overflow hidden on the container or the image itself. Buttons often use a radius the same as half their height for a pill. Cards use small radii for a crisp look and large ones for a soft look.
On mobile, slightly larger radii tend to feel friendlier, but consistency is more important than the exact value.
Elliptical and complex corners
CSS lets you set horizontal and vertical radii separately with a slash, such as 50% / 30%, producing elliptical corners and organic blob shapes. This tool uses equal radii, which covers most interface work.
For blobs, combine a slash form with different values per corner, and test the shape at several sizes.
Questions
What order are four values in?
Top left, top right, bottom right, bottom left.
How do I round only the top?
Set the bottom corners to zero.