Fancy Border Radius Playground

Interact with visual coordinate sliders to build fluid shape blobs using 8-value CSS border radius.

8-Axis Radius

Live Organic Shape Viewport

Color:

Generated CSS & Tailwind Output

Pure CSS property:

border-radius: 30% 30% 30% 30% / 30% 30% 30% 30%;

Tailwind CSS v4 Class:

rounded-[30%_30%_30%_30%_/_30%_30%_30%_30%]

Horizontal & Vertical Radius Sliders

Horizontal Axis (x1 x2 x3 x4)

Top-Left Horizontal:30%

Top-Right Horizontal:70%

Bottom-Right Horizontal:70%

Bottom-Left Horizontal:30%

Vertical Axis (y1 y2 y3 y4)

Top-Left Vertical:30%

Top-Right Vertical:30%

Bottom-Right Vertical:70%

Bottom-Left Vertical:70%

Pure CSS Keyframe Morph Code

Cycle Duration:8s

@keyframes morphBlob {
  0%, 100% {
    border-radius: 30% 30% 30% 30% / 30% 30% 30% 30%;
  }
  50% {
    border-radius: 70% 60% 80% 75% / 65% 85% 85% 70%;
  }
}

.organic-blob {
  border-radius: 30% 30% 30% 30% / 30% 30% 30% 30%;
  animation: morphBlob 8s ease-in-out infinite;
}

Fancy Border Radius Playground

Live Organic Shape Viewport

Generated CSS & Tailwind Output

Horizontal & Vertical Radius Sliders

Pure CSS Keyframe Morph Code

Curated Organic Shape Presets

Fancy Border Radius Playground

Live Organic Shape Viewport

Generated CSS & Tailwind Output

Horizontal & Vertical Radius Sliders

Pure CSS Keyframe Morph Code

Curated Organic Shape Presets