CSS Border Radius Generator

Shape corners with the full 8-value border-radius syntax — separate horizontal and vertical radii per corner — for organic blobs, eggs and leaves no 4-value radius can make.

The syntax most developers never learn

border-radius accepts EIGHT values: four horizontal radii, a slash, four vertical radii — giving every corner an ellipse instead of a circle. That asymmetry is the entire organic-blob trick: 30% 70% 70% 30% / 53% 30% 70% 47% turns a square into a pebble. Drag the eight sliders (or hit Randomize) and watch the shape live.

Worked example

.blob {
  border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%;
  background: linear-gradient(135deg, #34d399, #0ea5e9);
}

Where blobs earn their keep

• Decorative background shapes behind hero imagery.
• Organic image masks — friendlier than circles for portraits.
• Animated ambience: border-radius interpolates, so tweening between two blob values on a slow loop makes a living background (respect prefers-reduced-motion).

Percent vs pixel radii

• Percentages scale with the element — one declaration blobs any size. Pixel radii keep corners consistent across differently-sized elements — that is UI-corner territory, covered by the Tailwind radius tool.

Limitations

• Radius can only carve convex corners — spikes, stars and concave cuts are clip-path work.

Powered by