Fancy Border Radius Generator (CSS Blob Maker)

Create organic, non-symmetrical shapes using advanced CSS border-radius values. Move away from rigid boxes and circles to design friendly, human-centric interfaces.

Generate "blobs", "squircles", and organic containers instantly. Our tool visualizes the complex 8-point syntax so you don't have to calculate percentages manually.

The 8-Value Syntax

Most people use border-radius: 50%. But did you know you can control the horizontal and vertical radius of each corner independently?

60% 40% 30% 70% / 60% 30% 70% 40%

Tailwind Support

We generate arbitrary value classes for Tailwind JIT mode. Just copyrounded-[30%_70%_...] and paste it into your HTML. No config needed.

Use Cases

Profile Pictures: Make avatars stand out.
Hero Backgrounds: Animated blobs add depth.
Masking: Crop images creatively with CSS masking.

How to Animate Blobs

To create a "morphing" effect, use CSS keyframes to transition between different border-radius values.

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

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

Frequently Asked Questions

Why do I need the slash "/"?

The slash separates horizontal radii (left side) from vertical radii (right side). Without it, CSS assumes the horizontal and vertical curves are identical (perfect circular corners). With it, you can create elliptical corners.

Does this work in all browsers?

Yes! Advanced border-radius syntax is supported in all modern browsers (Chrome, Firefox, Safari, Edge) and has been for years. It is extremely performant compared to SVG masking.

Fancy Border

Appearance

Quick Shapes

Is this tool broken?