CSS border-radius generator

The CSS border-radius property rounds the corners of an element. Beyond simple rounded rectangles, it can produce circles, pills, leaf shapes and organic blobs by giving each corner different horizontal and vertical radii. This generator lets you adjust every corner visually and copy the resulting CSS.

How to use it

1. Adjust the radius for each corner, or link them for uniform rounding.
2. Switch to elliptical mode to set separate horizontal and vertical radii.
3. Copy the generated declaration.

Syntax explained

• border-radius: 12px; rounds all four corners equally.
• border-radius: 12px 0 12px 0; sets top-left, top-right, bottom-right, bottom-left (clockwise).
• border-radius: 50%; on a square makes a circle.
• border-radius: 9999px; makes pill-shaped buttons regardless of width.
• The slash syntax separates horizontal and vertical radii: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; creates an organic blob.

Tips

• Percentages are relative to the element's width (horizontal radii) and height (vertical radii), so the same percentage gives different curves on non-square elements.
• If radii add up to more than the side length, browsers scale them down proportionally, which is why very large pixel values produce perfect pills.
• Content is not clipped by border-radius unless you also set overflow: hidden, which matters for images inside rounded cards.
• Animate blob shapes by transitioning between two border-radius values for a soft morphing effect.