Border Radius Generator

In short border-radius accepts one value for all four corners, or up to four for each corner individually, and a slash to make them elliptical rather than circular — `border-radius: 30px / 60px` gives corners that are wider than they are tall. The elliptical form is what produces organic blob shapes when the eight values are all different, and it is the part most people never discover. The rule worth internalising is about nesting. When a rounded element sits inside another rounded element, the inner radius should be the outer radius MINUS the padding between them, or the two curves run at different rates and the gap between them visibly pinches at the corner. A 16px card radius with 8px of padding wants an 8px radius on whatever is inside it. Two smaller notes. A radius larger than half the element's size is clamped, which is why 9999px is the reliable way to make a pill rather than a rounded rectangle — the browser reduces it to exactly half the height. And a radius on an element with `overflow: visible` will not clip its children; you need `overflow: hidden` for an image to actually take the corner.