CSS border-radius generator
Round each corner on its own, in pixels or percent, including the elliptical two-value form that makes leaf and blob shapes. The CSS is written in its shortest correct form. Runs entirely in your browser; nothing is uploaded.
Elliptical corners give each corner two radii — horizontal, then vertical — written either side of a slash. That is the form that produces leaf and blob shapes rather than plain rounding.
Longhand, one property per corner, if you prefer it or need to override a single corner:
About this tool
border-radius is a shorthand for eight numbers, not four: every corner has a horizontal radius and a vertical radius, and when the two differ the corner is a quarter-ellipse rather than a quarter-circle. The two sets are written either side of a slash. Most of the time all eight are equal, which is why the property is usually seen with a single value.
How it works
The four corners are written clockwise from the top left: top-left, top-right, bottom-right, bottom-left. CSS lets you drop repeated values — one value applies to all four, two values apply to the two diagonal pairs, three values leave the fourth to mirror the second. The output above is collapsed to the shortest form that means exactly the same thing, and the slash half is dropped entirely when the vertical radii match the horizontal ones.
Percentages are resolved against the box itself — horizontal radii against its width, vertical radii against its height. That is why 50% turns any rectangle into an ellipse and keeps doing so as the box resizes, while a pixel radius does not.
Common questions
Why does a huge radius stop getting rounder?
Because the spec scales the radii down when two adjacent corners would overlap along an edge. Once the radii on a side add up to more than that side's length, they are reduced proportionally — so a 500px radius on a 200px-tall box behaves the same as 100px. Nothing is wrong; that is the defined behaviour.
Should I use 9999px or 50% for a pill button?
A large pixel value. With 50% the corners resolve against the box's own width and height, so a wide button becomes a lens shape rather than a pill. A pixel radius larger than half the height is clamped to exactly a semicircle at each end, which is what a pill is.
Why is my rounded corner square in one browser?
Most often a child element is painting over it. A rounded parent does not clip its children unless it has overflow: hidden — for images and background media, that is usually the missing piece rather than the radius itself.
Known limitations
px and % onlyBoth units are offered, but notrem,emorch. Swap the unit by hand afterwards if you need one of those; the numbers do not change.Zero keeps its unitA zero radius is written as0pxrather than a bare0. Both are valid CSS; the unit is kept so a four-value list stays visually consistent.No squircleThe smooth "superellipse" corner used by iOS is not a border-radius at all — CSS has no property for it, and reproducing it needs an SVG path or a mask. Not generated here.The preview clamps like a browser doesBecause it is a browser. If the shape stops responding to bigger numbers, the radii are being scaled down to fit the box — see the question above.
The same job in the browser's own tools
getComputedStyle(el).borderRadiusRead back the resolved value. The browser normalises the shorthand, which is the quickest way to check what a collapsed four-value list actually expanded to.el.style.borderRadius = "50% / 30%"Set a value straight onto an element from the console to test a shape on the real page before committing it to the stylesheet.Elements → Computed → border-radiusShows all four corner longhands expanded, including which rule set each one, when a radius is coming from more than one place.
More tools
See the whole toolbox — thirty-seven free tools planned, all running in your browser.