CSS Border Radius: Beyond Simple Rounded Corners

Most developers use border-radius: 8px and move on. But this property has far more potential than simple rounded corners.

The 8-Value Syntax

border-radius actually accepts up to 8 values — 4 horizontal radii and 4 vertical radii separated by a slash:

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

This creates organic blob-like shapes that are impossible with simple values.

Creating Organic Shapes

By using percentage values with the slash syntax, you can create unique organic shapes:

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #6366f1, #a78bfa);
}

These work great as avatar backgrounds, decorative elements, or hero section accents.

Asymmetric Cards

Instead of uniform rounding, try different values for each corner:

.card {
  border-radius: 24px 4px 24px 4px;
}

.card-alt {
  border-radius: 4px 24px 4px 24px;
}

Alternating between these on a grid creates a pleasing visual rhythm.

Pill Shapes

Use a very large value to get a perfect pill shape regardless of element size:

.pill {
  border-radius: 9999px;
  padding: 8px 24px;
}

This is the standard technique for tag/badge components and pill-shaped buttons.

Circle Images

A perfect circle requires equal width and height plus 50% radius:

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

50% always produces a perfect circle on square elements.

Animated Border Radius

Animate between shapes for morphing effects:

@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-animated {
  animation: morph 8s ease-in-out infinite;
}

This creates a soothing, organic animation that works great for loading states or hero backgrounds.

Experiment with all these shapes visually with our Border Radius Generator — adjust each corner independently and see results in real-time.