Border Radius Generator
Round element corners visually and copy the CSS border-radius, including the eight-value syntax that produces organic blob shapes rather than plain rounding.
The browser will quietly overrule the radius you set
Set border-radius: 80px on a 100×100 box and you do not get 80px corners. You get
50px, with no warning and no error. This is specified behaviour rather than a browser quirk:
when corners would overlap, the browser scales them down until they fit.
The rule is worth knowing exactly. For each of the four sides, add the two radii that touch it.
If any sum exceeds that side's length, work out
f = min(side length ÷ sum of its two radii) across all four sides, and
multiply every radius by f. On a 100×100 box with all radii 80, each side has 160px of
radius asking for 100px of room, so f = 0.625 and all four corners land on 50px.
| Box | You asked for | Scale factor | You get |
|---|---|---|---|
| 100×100 | 80 / 80 / 80 / 80 | 0.6250 | 50 / 50 / 50 / 50 |
| 100×100 | 50 / 50 / 50 / 50 | 1 (untouched) | 50 / 50 / 50 / 50 |
| 300×100 | 60 / 60 / 60 / 60 | 0.8333 | 50 / 50 / 50 / 50 |
| 200×100 | 200 / 20 / 20 / 20 | 0.4545 | 90.9 / 9.1 / 9.1 / 9.1 |
| 200×60 | 9999 / 9999 / 9999 / 9999 | 0.0030 | 30 / 30 / 30 / 30 |
Two consequences follow, and the second is the one that catches people out. First, the cap
means any radius at or above half the shorter side renders identically — a 200×60 box looks the
same at 30px, 100px or 9999px, which is why 9999px is the conventional way to
write "as round as it goes". Second, the scaling is global. Making one corner
too large shrinks all four. Asking for 200px on a single corner of a 200×100 box quietly drops
the other three from 20px to 9.1px — you changed
one number and three corners moved.
And 50% is not a circle unless the box is square
A percentage radius does not resolve against one dimension. It resolves against both, separately: the horizontal radius is a percentage of the width and the vertical radius a percentage of the height. On a square that happens to give a circle. On anything else it gives an ellipse.
| Box | Horizontal radius | Vertical radius | Shape |
|---|---|---|---|
| 100×100 | 50px | 50px | Circle |
| 200×100 | 100px | 50px | Ellipse |
| 300×60 | 150px | 30px | Ellipse |
This is why border-radius: 50% on a wide button produces a lens or leaf shape
rather than the pill people expect. The pill needs a length, not a percentage: on a 200×100 box
that is border-radius: 50px, which the overlap rule then
caps at exactly half the height however much larger you write it.
The short version of both sections: percentages give you an ellipse that follows the box, and lengths give you a fixed corner that the browser will silently shrink if it does not fit. Most of the surprising output from a border-radius tool is one of those two rules doing exactly what it is specified to do.
How to use
- Adjust each corner independently.
- Switch to the elliptical view for blob shapes.
- Watch the live preview.
- Copy the generated CSS.
Frequently asked questions
How does the slash syntax work?
The values before the slash set the horizontal radii of each corner and those after set the vertical radii. That makes each corner an ellipse rather than a circle, and varying all eight produces the organic blob shapes that are impossible with simple rounding.
What does a value of 50 per cent do?
Turns a square into a circle and a rectangle into an ellipse, since each corner radius becomes half the element's dimension and the four arcs meet. It is the standard way to make a circular avatar or button.
Why does my border radius look wrong on a small element?
Because when the radii would overlap, the browser scales all of them down proportionally to fit. A 20-pixel radius on a 30-pixel-tall element cannot be honoured, so the result is smaller than requested — and changes as the element resizes.
Should the inner radius match the outer on nested elements?
No, and matching them is a common visual error. For concentric corners to look right, the inner radius should be the outer radius minus the gap between them. Using the same value makes the inner corner look too round relative to the outer.
What is a squircle?
A shape between a square and a circle with a continuously curving corner rather than a circular arc, used prominently in Apple's interfaces. Plain border-radius cannot produce one, since it uses circular or elliptical arcs; approximating it needs a clip-path or an SVG.
Does border-radius clip the content inside?
It clips the background and border, but overflowing child content is only clipped if overflow is set to hidden. An image inside a rounded container will show square corners over the rounding unless the container clips it or the image carries the radius itself.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.