Fancy Border Radius

Fancy Border Radius is a free visual CSS generator for creating organic blob-like shapes using only the CSS border-radius property — no SVG needed. Get copy-paste CSS code instantly.

What is Fancy Border Radius?

Fancy Border Radius is a free, browser-based tool by 9elements that lets you visually create complex, organic shapes using CSS's border-radius property.

Most people know border-radius for making rounded corners (border-radius: 8px), but CSS actually supports a much more powerful 8-value syntax:

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

This creates completely asymmetric, blob-like organic shapes — and Fancy Border Radius gives you a visual editor to build them without writing a single line of CSS manually.

Why Use Fancy Border Radius Instead of SVG Blobs?

Unlike Blob Maker which generates SVG shapes, Fancy Border Radius generates pure CSS — which means:

• ✅ Smaller file size — No SVG markup, just a CSS property
• ✅ Infinitely scalable — CSS shapes scale perfectly at any resolution
• ✅ Animatable — CSS border-radius can be smoothly animated with transition or @keyframes
• ✅ Reusable — Apply to any element with a class, works on images, divs, buttons, and more
• ✅ No JavaScript — Pure CSS, no dependencies

How to Use It

1. Go to 9elements.github.io/fancy-border-radius
2. Drag the 8 control points around the preview shape
3. Watch the shape update in real-time as you drag
4. Copy the generated CSS value
5. Apply it to any element in your stylesheet:

.blob-shape {
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  background: #7c3aed;
  width: 300px;
  height: 300px;
}

Animating Fancy Border Radius Shapes

One of the biggest advantages over SVG blobs is CSS animation support:

@keyframes morph {
  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  50% { border-radius: 70% 30% 40% 60% / 60% 40% 50% 40%; }
}

.animated-blob {
  animation: morph 6s ease-in-out infinite;
}

Common Use Cases

• 🎨 Hero section decorations — Abstract blob shapes behind hero images or text
• 📸 Image masking — Apply border-radius to clip images into organic shapes
• 🔵 Background accent shapes — Decorative blobs in brand colors
• 💬 Speech bubbles — Asymmetric rounded shapes for chat UI elements
• ✨ Hover animations — Morph from one shape to another on hover

Related CSS Tools

• Blob Maker — SVG blob shape generator (downloadable SVG)
• Clippy — CSS clip-path shape generator
• CSS Shadows — Box shadow generator
• Neumorphism — Neumorphic CSS shadow generator