Can I set different radius for each corner?

Yes! This generator lets you set individual values for each of the four corners. You can also create asymmetric shapes using the advanced 8-value syntax for elliptical corners.

How do I make a perfect circle with border-radius?

Set border-radius to 50% on a square element. The element must have equal width and height for a perfect circle.

What are blob shapes and how do I create them?

Blob shapes are organic, irregular rounded shapes. Use the 8-value border-radius syntax where horizontal and vertical radii differ, creating asymmetric curves. Our generator has presets for popular blob shapes.

Border Radius Generator

Create CSS border-radius with visual preview

Top Left

Top Right

Bottom Left

Bottom Right

CSS Code

border-radius: 20px;

Preview

Presets

Square

Subtle

Rounded

Circle

Leaf

Leaf Alt

Drop

Tab