CSS border-radius generator
Set each corner radius and see the rounded box update live.
CSS border-radius generator
Round the corners of any element and copy the CSS border-radius code. Set each corner independently — top-left, top-right, bottom-right and bottom-left — and watch the preview box update live.
The border-radius shorthand
border-radius: top-left top-right bottom-right bottom-left; in clockwise order. A single value rounds all four corners equally; large equal values on a square make a circle. Example: border-radius: 12px 12px 12px 12px;.
Frequently asked questions
How do I make a circle? Use border-radius: 50% on a square element.
What order are the corners? Clockwise from the top-left: TL, TR, BR, BL.