Border Radius Generator

Border-radius rounds the corners of an element. A single value rounds all corners equally: border-radius: 10px. Four values set each corner: border-radius: 10px 20px 30px 40px (top-left, top-right, bottom-right, bottom-left).

Set border-radius to 50% on a square element. A 100px × 100px div with border-radius: 50% becomes a perfect circle. For an ellipse, use 50% on a rectangular element.

Use the slash syntax for different horizontal and vertical radii: border-radius: 50px / 25px creates horizontally elongated corners. Each corner can have independent elliptical values for complex organic shapes.

Yes. Use 8-value syntax with different horizontal and vertical radii: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. The generator provides drag handles to create unique organic blob shapes visually.

Yes. Apply border-radius directly to img elements or their container. border-radius: 50% on an img creates a circular image. Combine with overflow: hidden on the container for consistent results across browsers.