What border-radius is
The CSS border-radius property rounds the corners of an element. It accepts up to four values, one per corner, in order: top-left, top-right, bottom-right, bottom-left (clockwise from the top).
Common shapes
| Effect | Values (TL TR BR BL) |
|---|---|
| Uniform corners (standard card) | 16px on all |
| Perfect circle (square element) | 50% on all |
| "Teardrop" shape | One corner at 0, the other three rounded |
| Pill (button) | Half the element height on every corner |
Tip
To create a perfect circle from a square div, set border-radius to 50% — it works because the percentage is relative to the element's own width/height.
Frequently asked questions
In what order are the four border-radius values applied?
Always clockwise, starting at the top-left corner: top-left, top-right, bottom-right, bottom-left.
How do I make a perfect circle?
Apply border-radius: 50% to an element with equal width and height.
Can I use percentages instead of pixels?
Yes, CSS accepts percentages, but this tool works in pixels for precise visual adjustment.
Does border-radius work on images?
Yes, it can be applied to any element, including <code><img></code> tags, to create rounded avatars and thumbnails.