How to use Border Radius Generator
CSS can curve each corner differently. The four horizontal radii and four vertical radii are separated by a slash, allowing elliptical corners and organic shapes.
- Set the horizontal top-left, top-right, bottom-right and bottom-left percentages in clockwise order.
- Adjust the four vertical radii separately to stretch each corner. Percentages refer to the element’s width horizontally and height vertically.
- Use a square preview to find a starting shape, then test the output on your real element’s dimensions.
A practical starting point
Pair opposite large corners for a lozenge-like card while keeping the other pair nearly square.
border-radius: 12% 48% 12% 48% / 18% 42% 18% 42%;
Common mistakes
- A percentage radius changes with the element’s dimensions. Use pixel values in your project when you need a fixed curve.
- When adjacent radii would overlap, browsers proportionally reduce them. A 100% corner does not guarantee a full-width arc.
Frequently asked questions
Why does the same CSS look different on a rectangle?
Percentage radii use the element’s own width and height, so an elliptical corner scales differently on a rectangle.