Border Radius Generator

Frequently asked questions

How do I make an asymmetric border-radius?

border-radius accepts up to eight values split by a slash, like 30% 70% 70% 30% / 30% 30% 70% 70%, which sets horizontal and vertical radii separately. That's how organic squircle and blob shapes are built.

What's the difference between border-radius in % and px?

Pixel values stay fixed regardless of element size, while percentages scale with the element's width and height. Use % for pill shapes that adapt and px for consistent corner sizes across components.

Why does my border-radius look clipped?

If a child element has its own background or overflow, it can paint outside the rounded corner. Add overflow: hidden to the parent, or apply the same border-radius to the child.