Tools
Border-Radius Generator
Round all four corners at once, or fine-tune each one, and copy clean
border-radius CSS. Switch between pixels and percent for pill shapes and blobs.
Aa
CSS
About border-radius
One property, four corners. The shorthand reads clockwise from the top-left:
border-radius: TL TR BR BL. Equal values give a uniform round; mismatched values create tickets,
tabs and speech bubbles. Use % for shapes that scale with the box — 50% turns a
square into a circle and a wide box into a pill.
For the soft "squircle" corners you see in modern UI (smoother than a plain arc), browsers are adding
corner-shape; until it's everywhere, a generous border-radius plus a matching
shadow gets you most of the way.