🔧 Utility Tools
CSS Border Radius Generator
Design perfect rounded corners. Control each corner individually, use elliptical radii, and copy production-ready CSS.
📐 Used 11,283 times this month
Link all corners together
CSS output
border-radius: 12px;
💡 Ctrl+D to bookmark for next time
How it works
01
Adjust Corners
Each corner independent or all linked.
02
Live Preview
See rounded shape update instantly.
03
Copy CSS
Ready to paste into your stylesheet.
Frequently asked questions
How do I make a circle?
Set width = height and border-radius = 50%. For a pill button, keep both radii = height/2 or use a very large value.
Percentage vs pixel radius?
Percentage scales with the box size. Pixels stay fixed. For circles and pills, use percentages. For UI cards, use fixed pixels (usually 8-16px).
Can I make elliptical corners?
Yes — CSS supports `border-radius: 50px / 20px` for elliptical shapes. That's advanced use; this tool focuses on symmetric radii.
Is my data uploaded?
No. Everything runs in your browser.
All tools are free, browser-based, and process files locally. Read our Privacy Policy | Visit our blog.