An avatar set to border-radius: 50% on a 200 by 120 image comes out as an egg, not a circle. A pill button built the same way stretches into an ellipse the moment its label wraps to a second line. Both bugs come from the same detail, and dragging the corners on the box above makes it visible in about ten seconds.
Pull a corner instead of typing a number
The four handles sit on the inside of each corner. Drag one toward the middle of the box and the arc grows behind it. Horizontal movement feeds the corner's horizontal radius, vertical movement feeds the vertical one, so a diagonal pull rounds evenly and a sideways pull flattens the curve. Arrow keys nudge a focused handle by one step, and Shift with an arrow key moves it by ten.
Leave Move all four corners together checked while you find a shape you like, then uncheck it to break one corner away. Chat bubbles, tab strips, and card stacks nearly always come down to three matching corners and one odd one.
One radius per corner, or two
A corner is not a quarter circle by default. It is a quarter ellipse, and CSS lets you set the two axes separately. Flip Two radii per corner and each corner gains a V field next to its H field. The output switches to the slash form:
border-radius: 60px 20px 60px 20px / 30px 40px 30px 40px;Everything before the slash is horizontal, everything after is vertical, and both groups run top left, top right, bottom right, bottom left. Most people never write this form by hand, which is why blob shapes and soft asymmetric cards look hard to build. They are four numbers on each side of one slash.
Percentages resolve against two different axes
A percentage radius is not measured against one dimension. The horizontal half of a corner resolves against the element's width, the vertical half against its height. Set the unit above to %, type 50 into every field, then drag the width slider while the height stays put. The shape stays a perfect ellipse filling the box, and it stops being a circle the instant the two dimensions differ.
This is the egg-shaped avatar. border-radius: 50% only draws a circle on a square element. Force the square with aspect-ratio: 1 or equal width and height values, then apply the radius.
When the browser quietly shrinks your radii
Set the box to 200 pixels wide and give the top left and top right corners 150 pixels each. The two arcs need 300 pixels of a 200 pixel edge. Nothing overlaps on screen, because the browser rescales instead.
The rule is in the spec: for every side, divide the side length by the sum of the two radii touching it. Take the smallest of those four ratios, and if it lands below 1, multiply every radius on the element by it. The reduction is proportional and applies to all eight values at once, not only the pair causing the conflict. The strip under the preview reports the exact factor whenever this kicks in, along with which edge triggered it.
This is why border-radius: 9999px renders a clean stadium shape rather than an error. The value is absurd, the scaling rule reduces it to exactly half the shorter side, and you get the maximum rounding the box allows.
Pill buttons: 50% or 9999px
Both look identical on a single-line button, and they part ways the moment the element changes shape:
border-radius: 50%ties the curve to the element's own dimensions. A button whose label wraps to two lines turns into an ellipse with visibly curved top and bottom edges.border-radius: 9999pxgets clamped to half the shorter side, so the flat middle section survives at any height. The ends stay semicircular whatever the content does.
Use the large pixel value for pills and tags. Save 50% for elements you have already forced into a square, such as avatars and icon buttons.
What a rounded corner does not do on its own
The radius clips the element's own background and border. Child content ignores it completely. An image inside a rounded card keeps its square corners poking past the curve until the parent gets overflow: hidden, and that property brings side effects worth knowing about, since it also clips dropdowns and tooltips escaping the card.
Two more details show up in real components:
- Borders follow the radius, and the inner curve is tighter. Browsers subtract the border width from the outer radius for you. Nested elements get no such help, so a 12 pixel outer radius over a 2 pixel border needs 10 pixels on the inner element to look concentric.
box-shadowandoutlinefollow the curve;background-imagegets clipped by it. A hairline gap between a border and its background at the corners usually meansbackground-clip: padding-boxis missing.
Where this tool stops
The output covers border-radius and nothing else. Four things sit outside it:
- True squircles. Apple-style continuous corners come from a superellipse curve, not an ellipse. CSS
corner-shapeis arriving to handle it, though support is still thin, so an SVG or a clip-path is the current answer. The Soft square preset gets close with percentage radii and is not the same math. - Logical properties. The generator writes physical corners. Layouts flipping between left-to-right and right-to-left want
border-start-start-radiusand its three siblings, which map to the writing direction instead of the screen. - Responsive radii. Values here are static. A radius shrinking on small screens needs a media query or
clamp()wrapped around the output by hand. - Non-rectangular shapes. Anything with cut corners, notches, or curves along an edge belongs to
clip-path. The CSS Triangle Generator covers the pointed end of that, and the Box Shadow Generator handles the depth once the shape is settled.
Everything runs in your browser. The preview, the scaling calculation, and both code blocks are built with JavaScript on your machine, and no values reach a server.
