The order of the four values
Four values run clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Three values mean top-left, then top-right and bottom-left sharing the middle value, then bottom-right. Two values pair the diagonals: top-left with bottom-right, top-right with bottom-left. One value applies to all four.
The generator collapses your input to the shortest form that means exactly the same thing, and prints the four longhand properties alongside it. The longhand is what you want when a component overrides one corner — a tab that squares off its bottom edge, a grouped button that only rounds the outer end — because setting border-top-left-radius leaves the other three alone, while the shorthand resets all of them.
px versus percent
A px radius is a fixed curvature regardless of the element's size. A percentage radius is relative: the horizontal radius is a share of the element's width, the vertical radius a share of its height. This is why border-radius: 50% gives you an ellipse on a non-square element and a circle only when width and height match — pair it with aspect-ratio: 1 if the content might change size.
Percentages are also what let a shape keep its proportions while resizing, which is the reason blob shapes are written in percent rather than px. For interface work, px is almost always the right choice, because it keeps a consistent visual language across elements of different sizes.
The pill shape is a special case worth understanding rather than memorising. 9999px is not magic; it is just a radius large enough that the clamping rule below reduces it to exactly half the shorter dimension, which is the definition of a semicircular end. That is why the same value works on a 32px chip and a 60px button.
Elliptical corners and the slash
Everything before the slash is a horizontal radius and everything after it is a vertical radius, each list following the same clockwise order and the same one-to-four value expansion. A corner with a 30% horizontal and 70% vertical radius is carved by the quadrant of an ellipse, not a circle, which is what produces the asymmetric, hand-drawn look of the blob preset.
Applied to an image or any element with overflow: hidden, it works as a mask, so the same trick shapes photos. Two or three of these with slightly different values, layered at low opacity, is the entire recipe behind most of the soft background shapes on marketing pages.
When the radii do not fit
If two radii on the same edge add up to more than the length of that edge, the browser does not clip or overlap them. It computes a scaling factor and reduces every radius on the element by that same proportion, so the shape stays continuous. That rule is what makes 9999px safe, and it is also why setting three large corners and one at zero can produce curves smaller than you asked for — the reduction is applied uniformly, not only to the corners that overflowed.
The related surprise is borders. The inner curve of a bordered element has a radius equal to the outer radius minus the border width, so a 1px border on a 12px radius looks fine, and an 8px border on a 6px radius produces a square inner corner. That is specified behaviour rather than a rendering bug, and the fix is to raise the outer radius until the inner one is positive.
Questions people ask
Why is my 50% radius an oval instead of a circle?
Because the element is not square. A percentage horizontal radius is measured against width and the vertical against height, so a 200 by 120 box with 50% gets a 100px horizontal and 60px vertical radius on every corner — an ellipse by definition. Set equal width and height, or add aspect-ratio: 1, or use a px radius equal to half the shorter side.
The corners are not rounding on my image.
If border-radius is on the img element itself it will round, in every current browser. If it is on a wrapper, the image is a child painted over the parent's background, so the parent also needs overflow: hidden to clip it. A background-image behaves differently again: it is clipped by the padding box by default, so the radius applies without any extra property.
What radius should I use for buttons and cards?
There is no correct number, but there is a consistent relationship: larger elements take larger radii, or the curve reads as an afterthought. A common scale is 4px for tags, 6 to 8px for buttons and inputs, 12 to 16px for cards, and full rounding for pills and avatars. Pick three or four values, put them in tokens, and stop deciding per component — inconsistent radii are one of the most visible signs of an interface assembled by several people who never agreed.
Can I animate border-radius?
Yes. It is an interpolable property, and animating between two sets of percentage values is exactly how the morphing blob effect is built. The caveat is the same as any non-composited property: it triggers layout and paint work every frame, so keep it off long lists and anything running during a scroll. Two or three elements on an idle page is fine.