How to use the Border Radius Generator
- Choose px or %.
- Set one radius for all corners, or each corner separately.
- Copy the CSS.
What does this tool do?
border-radius rounds the corners of any element. A radius of 50% on a square makes a circle; different values per corner create pill and leaf shapes.
Why use it?
- Buttons, cards and avatars.
- Per-corner control.
- Instant preview.
Order of values
border-radius: 24px 8px 24px 8px; sets top-left, top-right, bottom-right, bottom-left — clockwise from the top left.
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
Why doesn't an image inside my rounded box have rounded corners?
Child content can spill over the corners. Add overflow: hidden to the rounded container, or give the image the same border-radius.
What does the slash in border-radius mean?
Values before the slash set the horizontal radius and values after it set the vertical radius, which creates elliptical corners — for example border-radius: 50% / 20%.
Last reviewed by the M2Toolkit team.