When we first learn CSS, the border-radius property seems incredibly simple. We use it to round the corners of our cards (border-radius: 8px), make pill-shaped buttons (border-radius: 9999px), or turn square avatars into perfect circles (border-radius: 50%). You can generate custom corner radii and 8-point organic blobs in real-time with our CSS Border Radius Generator or add depth with our Box Shadow Generator.

But did you know that border-radius is capable of creating fluid, organic, and completely asymmetrical “blob” shapes?

In modern web design, these organic shapes are everywhere. They serve as abstract backgrounds, modern profile image frames, and eye-catching interactive components. Best of all, they don’t require heavy SVG files or complex images—they can be created entirely in CSS using the 8-value border-radius syntax.

In this guide, we’ll explain how this advanced syntax works and give you a playground to create and copy your own custom shapes.

The Secret: Elliptical Border Radius

To understand the 8-value syntax, we first need to understand how the browser renders rounded corners.

When you write border-radius: 10px;, you are telling the browser to draw a circle with a radius of 10px in the corner of your element. The curve of the corner is a segment of that circle.

However, corners don’t have to be circular. They can be elliptical. An ellipse has two radii:

  1. A horizontal radius ($r_x$)
  2. A vertical radius ($r_y$)

To specify an elliptical corner, you separate the horizontal and vertical values using a slash (/):

/* border-radius: [horizontal] / [vertical]; */
border-radius: 50px / 30px;

In this case, the corner curves will have a horizontal radius of 50px and a vertical radius of 30px. If you apply this to all corners, you get a squashed, oval-like rectangle.

Expanding to 8 Values

We can specify the horizontal and vertical radii for each of the four corners independently. This is where we get 8 distinct values.

The syntax follows this order, with horizontal values first, then a slash, then vertical values:

border-radius: [TL-h] [TR-h] [BR-h] [BL-h] / [TL-v] [TR-v] [BR-v] [BL-v];
  • Horizontal Group (before /): Top-Left, Top-Right, Bottom-Right, Bottom-Left
  • Vertical Group (after /): Top-Left, Top-Right, Bottom-Right, Bottom-Left

Visualization

Think of it as two separate passes:

  1. You set the horizontal curve depths for the top, right, bottom, and left sides.
  2. You set the vertical curve depths for the top, right, bottom, and left sides.

When these two sets of curves intersect, they create beautiful, asymmetric shapes that feel organic and fluid instead of rigid and geometric.

Creating a Perfect “Blob”

To create a fluid blob, you want to use percentages rather than absolute pixel values. Percentages scale automatically with the size of your element.

Here is a classic recipe for a smooth organic shape:

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

If you analyze this:

  • Horizontal curves: Top-left starts deep (60%), top-right is shallower (40%), bottom-right is tight (30%), and bottom-left is wide (70%).
  • Vertical curves: Top-left curves down (60%), top-right is shallow (30%), bottom-right goes high (70%), and bottom-left is moderate (40%).

The result is an organic, asymmetric shape that looks incredibly premium as a background accent or image container.

Interactive 8-Value Border Radius Generator

Use the sliders below to adjust the horizontal and vertical radii for all four corners independently. Watch the preview shape change in real-time, click a preset to get started, and copy the clean CSS code when you’re done.

🔮 Interactive Organic Shape Builder
100% Client-Side
Horizontal Radii (width curve)
Vertical Radii (height curve)
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Practical Layout Techniques

Understanding the math is one thing, but how do we implement this inside actual UI layouts? Here are three modern use cases for organic shapes in CSS.

1. The Fluid Image Mask

Instead of placing profile pictures in rigid circles, you can apply a fluid border-radius to make standard portraits look highly stylized:

.avatar-blob {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

2. Animated Blobs (The Hover Effect)

By using CSS transitions, you can animate between two different border-radius values to make an element morph smoothly when the user hovers over it:

.interactive-card {
  width: 250px;
  height: 250px;
  background: var(--primary);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transition: border-radius 1s ease-in-out;
}

.interactive-card:hover {
  border-radius: 40% 60% 70% 30% / 70% 40% 30% 60%;
}

Note: For the smoothest morphing animation, keep your transitions around 1s to 2s with ease-in-out timing.

3. Layered Background Accents

By layering multiple organic shapes with different gradients, opacities, and sizes, you can build rich abstract backgrounds. You can even add subtle infinite spin animations:

@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.background-blob {
  position: absolute;
  filter: blur(40px);
  opacity: 0.15;
  animation: slow-spin 20s linear infinite;
}

Level Up Your CSS

If you need more advanced or precise customization of CSS shapes, head over to our main Border Radius Generator tool. There you can tweak corner positions visually and preview the layout on a variety of container shapes in real time.