CSS Pill / Stadium Shape Generator
Design CSS border-radius visually: four independent corner sliders in px or percent, a link-all-corners shortcut for instant circles and pills, plus an organic blob mode with randomized shapes.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the border-radius generator with all four corners linked and pushed to a very large radius: 999px. On a typical button-sized rectangle, a radius that large gets clipped by the browser to exactly half the box's height, which is what produces the fully rounded pill or stadium shape rather than a square with slightly rounded corners.
This is why pill buttons do not need a precise radius value tuned to each button's height — any number comfortably larger than half the height gives the identical clipped result, which is also why 999px (or even 9999px) has become the informal community shorthand for 'round this all the way' in CSS.
Resize the box in your own layout and the same 999px keeps producing a full pill at any height, since the browser always clips to half the box automatically. Copy the CSS once it looks right, or unlink the corners to build an asymmetric capsule instead.
Example. All four corners set to 50% copy a border-radius declaration of 50%.
Limit. Each corner is either px or percent; there is no separate elliptical long-radius control.