Round any corner, curve it inward, or shape a full circle — adjust the controls and copy the finished CSS. No signup, no limits.
How It Works
The border-radius property rounds an element’s corners by defining a quarter-ellipse at each corner, sized by a horizontal and vertical radius. A single value like border-radius: 20px applies that radius to all four corners equally. Four different values — border-radius: 20px 0 20px 0 — round only the top-left and bottom-right corners, which is what the Advanced mode in this generator controls directly.
Percentage values behave differently from pixels: border-radius: 50% resolves the horizontal radius against the element’s width and the vertical radius against its height, independently. That’s why 50% turns a square into a circle and a rectangle into a pill or stadium shape — the tool’s Circle/Pill button uses exactly this behavior.
A standard border-radius can only curve a corner outward (convex). To curve a corner inward (concave) — the effect behind “inverted border-radius” searches — border-radius alone can’t do it, because it has no way to describe a curve that bends the other direction. This generator switches to clip-path: path() for any corner marked Invert, tracing the box outline with SVG-style arc commands and flipping the arc’s sweep direction only at the inverted corner. The output is still plain, copy-pasteable CSS — it just uses clip-path instead of border-radius for that shape.
Uniform vs. Advanced Mode
Uniform mode sets one radius for all four corners — the fastest path to a standard rounded button, card, or image, and what most border-radius generator and css border radius generator searches are looking for.
Advanced mode unlocks independent horizontal and vertical radius values per corner, plus the Invert toggle. This is what an advanced border radius generator needs to produce: asymmetric shapes, elliptical corners, and inward-curving corners that uniform mode can’t express.
Circles, Pills, and Organic Blobs
Set the radius to 50% on a square box and every corner’s curve meets in the middle — the result is a perfect circle. The same 50% on a rectangle produces a pill or stadium shape, since the horizontal and vertical radius resolve against different dimensions. The Circle/Pill button applies this automatically based on the box size.
For a “fancy,” organic look — the soft, asymmetric blob shape used in hero sections and image masks — each corner needs a different horizontal and vertical radius, usually in percentages. The Randomize Blob button generates one of these combinations instantly; toggling Advanced mode lets you fine-tune any corner afterward.
Do You Still Need -moz-border-radius?
No. -moz-border-radius was Firefox’s vendor-prefixed implementation of border-radius, needed only in Firefox 3.6 and earlier. Firefox has supported unprefixed border-radius natively since version 4, released in 2011, and every other modern browser has supported it without a prefix since browser support for CSS3 rounded corners became standard shortly after. There’s no practical reason to add -moz-border-radius (or -webkit-border-radius) to CSS written today — this generator only outputs the modern, unprefixed property.
Using This in WordPress
The generated CSS drops directly into a theme’s Additional CSS panel (Appearance → Customize → Additional CSS), a block’s Advanced → Additional CSS Class settings paired with a stylesheet rule, or inline in a Custom HTML block alongside the markup it applies to. Target the element with a class or ID, then paste the border-radius (or clip-path, for inverted shapes) declaration inside the rule.
FAQ
What does a border-radius generator do?
A border-radius generator lets you adjust corner rounding visually and copies out the matching border-radius CSS, removing the need to guess pixel or percentage values by hand.
How do I make a perfect circle with border-radius?
Set border-radius: 50% on an element with equal width and height. On a non-square element, the same value produces a pill or stadium shape instead of a circle.
Can CSS border-radius curve a corner inward instead of outward?
Not with the border-radius property alone — it only supports outward, convex curves. An inverted, concave corner needs clip-path, which this generator produces automatically when a corner’s Invert toggle is on.
Do I need -moz-border-radius for Firefox in 2026?
No. Firefox has supported unprefixed border-radius since version 4 (2011), so -moz-border-radius is dead code in any current project.
How do I create a fancy, organic blob shape with border-radius?
Give each corner a different horizontal and vertical radius, typically in percentages — this generator’s Randomize Blob button creates one instantly, and Advanced mode lets you adjust each corner afterward.