Border Radius Generator
Guide
CSS Border Radius Generator
Visually design rounded corners for your CSS elements. Adjust each corner independently, use elliptical radii, pick from presets, and copy the CSS code — all with a live preview.
How to Use
Choose simple mode to set all corners at once, or switch to advanced mode for individual corner control. Enable elliptical mode for separate horizontal and vertical radii. Use the presets gallery for common shapes like circles, pills, and squircles. Copy the generated CSS when you are happy with the result.
Features
- Simple & Advanced Mode – Uniform corners or individual control for each corner
- Elliptical Radius – Set separate horizontal and vertical radii per corner for complex shapes
- Unit Selection – Switch between px, %, em, and rem
- Presets Gallery – Circle, pill, rounded card, squircle, organic blob, speech bubble, and more
- Live Preview – See your border radius applied to a preview box in real time
- Copy CSS – One-click copy of optimized CSS shorthand
Install Our Extensions
Add IO tools to your favorite browser for instant access and faster searching
恵 Scoreboard Has Arrived!
Scoreboard is a fun way to keep track of your games, all data is stored in your browser. More features are coming soon!
Must-Try Tools
View All New Arrivals
View AllUpdate: Our latest tool was added on Mar 8, 2026
Get Involved
Help us continue providing valuable free tools
