Color & Design
Border Radius Generator
Round each corner independently, watch the shape update live and copy a clean border-radius declaration.
Good to know
Frequently asked questions
How do I make a perfect circle?
Switch the unit to percent and set every corner to 50% on an element with equal width and height.
What is a pill button?
Any very large pixel radius, commonly 999px, which clamps to half the element height automatically.
Why does percent look different on wide elements?
Percentages are calculated separately for the horizontal and vertical axis, so wide boxes get elliptical corners.
Does a radius clip the content?
Only if you add overflow: hidden. Otherwise child elements can still paint over the rounded corners.