Border Radius Generator

Use the full syntax: border-radius: top-left top-right bottom-right bottom-left. For example, border-radius: 10px 0 10px 0 rounds only the top-left and bottom-right corners. To round one corner: border-top-left-radius: 20px.

Use a slash to set horizontal and vertical radii separately: border-radius: 50px / 25px creates an oval shape. Full syntax: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. This lets you create organic shapes like a “drop” or an “egg”.

Set border-radius: 50% on a square element (equal width and height). For a rectangle, 50% creates an ellipse. For a pill shape, use border-radius: 9999px — the rounding will be maximal along the shorter side.

Yes, with overflow: hidden, content is clipped at the rounded corners. This is a standard technique for cards with images. Without overflow: hidden, child elements may extend beyond the rounded corners, especially if they have their own background.

border-radius is supported in all modern browsers without prefixes. Elliptical values and percentage units also work everywhere. The only limitation is older versions of IE (8 and below), which are no longer relevant.