CSS Circle Generator — 50% Border Radius
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.
Result
This page opens the border-radius generator with all four corners linked and set to 50%, the value that turns a box into a circle using nothing but CSS. Honestly: on a square box this makes a perfect circle, but on a rectangular box the same 50% instead produces a stadium-like ellipse, since each corner only ever rounds off its own quarter.
That distinction matters because 50% border-radius is the single most common way to build circular avatars, icon badges and status dots in CSS — far simpler than clipping a circle with a mask or drawing one in SVG, and it stays crisp at any size since it is a relative percentage, not a fixed pixel radius.
Switch the box to a fixed square size in your own CSS to lock in the perfect circle, or leave it rectangular on purpose for a pill-like shape — either way, the corners stay linked here so a single slider keeps all four in sync while you copy the resulting CSS.