Free Online CSS Border Radius Generator with Elliptical Corners
Set all four corners independently, then switch on the two-value elliptical form to give each corner a separate horizontal and vertical radius, which is how the softer squircle shapes are made. A per cent mode is included, along with a wide preview that shows why per cent behaves as it does.
Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.
Why a Per Cent Radius Turns Into an Oval
It is measured against the box, not against the corner.
A radius in pixels is one number and gives a circular corner: 20px across and 20px down.
A radius in per cent is two numbers in disguise. The horizontal part is worked out from the
width of the element and the vertical part from its height, so
border-radius: 20% on a 400 by 100 box means 80px across and 20px down. The
corner is an ellipse, and on a wide box it looks stretched.
That is not a bug, and it is occasionally exactly what you want:
border-radius: 50% turns a square into a circle and a rectangle into a full
ellipse, which is the shortest way to write either. But for a card or a button, where the
width changes with the content, a per cent radius means the corner changes shape as the box
changes shape. Pixels or rem keep it steady. Turn on the wide preview here and switch the
unit to see the difference on the same numbers.
How to Build a CSS Border Radius
A few steps, and nothing is uploaded.
What to Know About Border Radius
Including why a per cent radius changes shape with the box.
border-radius: 50% draws a circle on a square and an ellipse on a rectangle.
border-radius: 40px 40px 40px 40px / 20px 20px 20px 20px means every corner reaches 40px sideways and 20px down, which is a flatter, wider curve than any single value can give. The four values before the slash are horizontal, the four after are vertical.
overflow: hidden. This is why an image inside a rounded card often keeps square corners until you round the image too or clip the parent.
clip-path, and this page will not produce it.
Key Features & Capabilities
What this tool does, and what it deliberately does not.
About the CSS Border Radius Generator
border-radius looks like the simplest property in CSS until you meet its second form. One value rounds everything, four values round each corner in the order top left, top right, bottom right, bottom left, and a slash splits each corner into a horizontal and a vertical radius so the curve can be wider than it is tall. That last form is the one that produces the soft, almost squircle corners people admire and then cannot reproduce.
This page exposes all of it. Drag the four corners together or separately, switch on the elliptical form to get the second set of radii, and change the unit between pixels and per cent. The preview is a real element, so the curve you are looking at is the curve the browser draws, and the wide-box toggle exists because per cent radii cannot be understood from a square.
The output is a single shorthand declaration with the units written in, in the order the specification uses, so it drops straight into a stylesheet. Nothing is uploaded and nothing is remembered between visits; the page is a way of seeing a value before you commit it.
Frequently Asked Questions
Elliptical corners, per cent, squircles and clipping.
border-radius: 50% on an element whose width and height are equal. On an element with unequal sides the same value gives a full ellipse, which is often useful in itself. For a pill shape on a box of unknown width, a very large pixel radius such as 9999px is the usual approach, since the browser caps it at half the shorter side.clip-path, and accept that the element then clips its content differently.overflow: hidden to the card so anything inside is clipped to the curve. The second option is usually cleaner, since it also handles content you add later.