What is a Fancy Border Radius (Blob)?

For years, web developers have relied on standard shapes like squares, rectangles, and perfect circles. However, modern UI design (especially in landing pages and portfolio websites) has moved towards organic, asymmetrical shapes commonly referred to as “Blobs.” Instead of putting a profile picture or a hero illustration in a boring square frame, wrapping it in a fluid, water-drop-like shape makes the design feel premium and dynamic.

Our free Fancy Border Radius Generator allows you to visually manipulate the CSS border-radius property to create these complex organic shapes without any guesswork.

The Secret of the 8-Point Border Radius

Most beginners only know about the standard 4-point border radius (e.g., border-radius: 10px 20px 10px 20px;) which controls the top-left, top-right, bottom-right, and bottom-left corners. But CSS allows you to get much more complex by defining separate horizontal and vertical radii using a forward slash /.

By using the 8-point syntax (e.g., border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;), you are telling the browser to curve the corners independently on the X and Y axes. This allows the shape to bulge and dent asymmetrically, creating the “blob” effect.

• The First 4 Values (Before the slash): Control the horizontal width of the curve on the top and bottom edges.
• The Last 4 Values (After the slash): Control the vertical height of the curve on the left and right edges.

UI Design Rule: The magic formula for a perfectly closed, non-breaking blob is that opposite sides must add up to 100%. If the top-left horizontal value is 30%, the top-right MUST be 70%. Our generator handles this math for you automatically in the background!

Animating the Blob

One of the most impressive effects you can create is an animated, breathing blob. By generating two or three different fancy border-radius values using our tool, you can put them inside a CSS @keyframes animation to create a shape that morphs fluidly on the screen, perfect for background hero animations.