CSS Border Radius Generator

How to use CSS Border Radius Generator

1. Set a single radius for all corners, or unlock the corners to set each one.
2. Switch on the elliptical (two-value) mode for blob shapes.
3. Watch the preview, then copy the generated CSS.
4. Four values run clockwise from the top left: top-left, top-right, bottom-right, bottom-left.
5. The browser caps a radius at half the shorter side, so any very large value gives a pill or a circle.
6. border-radius clips backgrounds and borders, and box-shadow follows it automatically — but child content needs overflow: hidden to be clipped too.

One property, up to eight numbers

border-radius: 8px rounds all four corners. Give it four values and they apply clockwise from the top left. Add a slash and four more — border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% — and the numbers before the slash are the horizontal radii while those after are the vertical ones, making each corner an ellipse rather than a circle. That second form is how every organic blob shape you have seen in a hero section is made, and it is a single property rather than an SVG.

Percentages versus pixels

A pixel radius is fixed, so the same value looks proportionally larger on a small element than a large one. A percentage is relative to the element’s own dimensions, so 50% on all corners turns a square into a circle and a rectangle into a pill — and stays correct at every size. Use pixels for cards and buttons where you want a consistent corner across different-sized elements, and percentages for shapes that should scale with the box. 9999px is the common trick for a pill button, since the browser caps the radius at half the shorter side.

Nested corners need different radii

A rounded element inside another rounded element looks wrong when both use the same value: the inner corner appears too square against the outer curve. The rule designers use is that the inner radius should be the outer radius minus the padding between them. A card with a 16px radius and 8px of padding wants 8px on the inner element. Getting this right is a large part of why some interfaces look carefully made and others do not.