CSS Border Radius: Beyond Rounded Corners

Explore the full power of border-radius: asymmetric radii, blob shapes, squircles, organic pill buttons and the little-known 8-value syntax that gives you total control.

Most developers use border-radius for one thing: rounding corners. But the property is far more capable. With the full syntax, you can create organic blobs, leaf shapes, squircles and more — all in pure CSS.

Most people know border-radius: 20px. Few know you can set each corner's horizontal and vertical radii independently:

/* border-radius: TL TR BR BL / TL TR BR BL */
/* First set = horizontal radii, second = vertical */

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

This single rule creates an organic blob shape. The first four values are the horizontal radii of each corner (top-left, top-right, bottom-right, bottom-left). The four values after the slash are the corresponding vertical radii.

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 6s ease-in-out infinite;
  background: linear-gradient(135deg, #e8a020, #e07070);
}

@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%; }
}

A squircle is between a square and a circle — tighter corners than a circle, rounder than a square. Apple uses this for app icons. In CSS:

/* Close approximation */
.squircle {
  border-radius: 30%;
}

/* More precise with clip-path */
.squircle-precise {
  clip-path: path('M 0,50 C 0,0 0,0 50,0 S 100,0 100,50 100,100 50,100 0,100 0,50');
}

/* Leaf */
.leaf {
  border-radius: 0 70% 0 70%;
  transform: rotate(45deg);
}

/* Teardrop */
.teardrop {
  border-radius: 50% 50% 50% 0 / 50% 50% 0 50%;
  transform: rotate(-45deg);
}

/* Egg */
.egg {
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Our Border Radius Generator lets you drag values interactively and see these shapes update in real time.