What do the eight values mean?
border-radius is shorthand for eight numbers across four corners. The four values before the slash set the horizontal radii, the four after set the vertical radii, and both groups go clockwise: top-left, top-right, bottom-right, bottom-left. When the two groups match, a corner is circular; when they differ, it's elliptical. That's the trick behind organic blob shapes — give each corner a different ellipse and the edges read as one continuous, flowing curve. Write just one value and it applies to all eight.
Percentages or pixels?
Percentage values resolve against the box's own size: the horizontal radius is a percentage of the width, the vertical radius a percentage of the height. A shape defined in percent keeps its proportions as the box resizes, which is why blob shapes are always written in percent. Buttons, cards, and input fields are the opposite case — pixels or remare the better choice there, otherwise a wide button's corner reads differently from a narrow one's. For a fully round, pill-shaped end, a large pixel value such as 999px is safer than 50%: once the radii no longer fit inside the box, the browser scales all of them down by the same ratio, so the result is a clean capsule at any size.
Things to watch for
Rounding only clips the element's own background and border — a child image or table still overflows past the corner. To clip child content too, add overflow: hidden to the container. Another common slip: setting the outer and inner radius to the same value in nested boxes. A visually correct inner corner should actually be smaller than the outer radius, by roughly the padding between them. Shadows, the outline, and the focus ring all follow the rounding automatically; for outlines, outline-offset lets you adjust the gap. Combine the shape you build here with the box-shadow generatorto see a card's final look in one step.