Border Radius Generator: Rounded Corners and Blob Shapes in CSS

What is it?

The Border Radius Generator shapes buttons, cards and images with rounded corners. Set each corner on its own in px or %, or switch to Blob shape for soft organic shapes made with the 8-value border-radius syntax, with New random blob for ideas.

Who is it for?

Web designers, Blogger theme editors, developers styling cards and profile pictures, and students learning CSS.

How to use it

1. Choose the Style: Corners or Blob shape, and the Unit.
2. Drag the sliders, or tap New random blob.
3. Tap Copy CSS and paste it into your stylesheet.

Examples

• Circle avatar: border-radius: 50% on a square image.
• Pill button: a large px value like 999px.
• Blob: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%.

Errors and how to fix them

• Corners look clipped or uneven: very large values on small boxes overlap; the browser scales them down. Use % for shapes that adapt to size.
• Image corners not rounded: put the border-radius on the image itself, or add overflow: hidden to its container.
• Shadow doesn’t follow the curve: add border-radius to the same element that has the shadow.

Questions people ask

• Pixels or percent? Pixels for consistent corners; percent for shapes that scale with the box.
• Does it work on images? Yes, apply it to img elements.

Open the tool: Border Radius Generator

Still stuck?

Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.