What is border-radius?

Border-radius is a CSS property used to round the corners of an element. This tool helps you visualize and copy the code for complex corner shapes.

Does this support all browsers?

Yes, the generated CSS code is standard and compatible with all modern web browsers including Chrome, Firefox, and Safari.

Home / Fancy Border Radius Generator

Fancy Border Radius Generator

Create unique, organic SVG-like shapes using nothing but CSS. Adjust the 8 points of the border-radius property to make beautiful blobs for your UI components.

Shape Controls

Top Left 30%

Top Right 70%

Bottom Right 70%

Bottom Left 30%

TL Vertical 60%

TR Vertical 40%

BR Vertical 60%

BL Vertical 40%

CSS Property

How to Create CSS Blobs

Our **Fancy Border Radius Generator** uses the full potential of the CSS border-radius property. While most developers only use one value (e.g., 10px), CSS allows you to define up to 8 specific values for a single element.

The syntax follows this pattern:
border-radius: H1 H2 H3 H4 / V1 V2 V3 V4;

By splitting the horizontal (H) and vertical (V) radii, you can move the corners independently, creating organic, asymmetric shapes that look like liquid drops or clouds.

Simply move the sliders until you find a shape you like, copy the code, and paste it into any container to transform it instantly.

Where to use Blobs?

Profile Pictures: Give a unique personality to avatars instead of boring circles.
Feature Cards: Use soft, organic backgrounds behind icons to draw attention.
Buttons: Subtle asymmetric borders can make a primary CTA stand out with more "energy".
Image Masks: Use overflow: hidden on a blob container to mask images into organic shapes.

The 8-Value Syntax Explained

The slash / in the code separates the horizontal values from the vertical ones.

border-radius: 30% 70% 70% 30% / 60% 40% 60% 40%;

The first four values define the horizontal curve for each corner (TL, TR, BR, BL), and the last four define the vertical curve for those same corners.

Frequently Asked Questions

Are these shapes mobile-friendly?

Yes! Since this is pure CSS, it's incredibly lightweight and works perfectly on all screen sizes. It won't affect your site's performance like high-res images would.

Can I animate these shapes?

Absolutely. You can use CSS transitions or keyframe animations to interpolate between different border-radius values, creating a "pulsing" or "liquid" motion effect.

Is there any browser compatibility issue?

The 8-value syntax is part of the standard CSS3 specification and is supported by all modern browsers (Chrome, Firefox, Safari, Edge) for over a decade.