⬜ Border-Radius CSS Generator — Rounded Corners
CSS border-radius generator with independent corner control, leaf and blob shapes, live preview, and copy code.
20%
20%
20%
20%
📚 About This Tool
border-radius rounds element corners. 50% turns a square into a circle. Four values control each corner separately. Percentage scales with element size; pixels stay fixed.
❓ FAQ
When should I use % vs px?
Use % for responsive shapes (like circular icons). Use px for buttons and cards that should look identical at any size.
How do I create a leaf shape?
Use asymmetric values: 0 50% 0 50% or 50% 0 50% 0.
Can I clip overflowing content?
Yes — add overflow: hidden on the container to prevent images or content from exceeding rounded corners.
Does border-radius affect overflow?
Yes. Inner elements need overflow:hidden or matching border-radius to render correctly.