Create perfect rounded corners – uniform or individual control, live preview & CSS code
Want to embed this border radius generator on your website? Use this code:
One to four values, slash syntax for elliptical corners, and how percentages work.
Read Tutorial →How to create perfect capsules and circles with border-radius.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| Uniform & individual corners | ✅ | ✅ | ✅ |
| Multiple units (px, %, em, rem) | ✅ | ❌ | ✅ |
| Live preview | ✅ | ✅ | ✅ |
| Elliptical corners (horizontal/vertical) | ❌ (planned) | ✅ | ❌ |
| Download CSS file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
px is an absolute value – the corner radius stays the same regardless of element size. % is relative to the element's dimensions: horizontal radius uses width, vertical radius uses height. 50% on a square makes a circle; on a rectangle it creates an ellipse.
Set border-radius: 50%; on a square element (equal width and height).
Yes, use slash syntax: border-radius: 50px / 20px; – horizontal radius 50px, vertical radius 20px. This generator currently supports uniform and individual corners with a single value per corner. Elliptical support is planned.
Two values: first applies to top-left and bottom-right, second to top-right and bottom-left. Four values give full individual control.
Rounded corners soften the strict geometry of rectangles, making interfaces feel friendlier and more modern. They are essential for buttons, cards, badges, avatars, and many other UI components.
Use the same radius across similar components for a cohesive look.
Smaller screens often benefit from slightly larger radii (8‑12px).
Border-radius is GPU‑accelerated – no performance penalty.
Tools to enhance your UI workflow