Creating Complex CSS Shapes with Border Radius and Clip-Path

Beyond Rounded Corners

Most developers use border-radius with a single value to round all corners equally. But the property accepts up to eight values — four for each corner's horizontal and vertical radii — enabling shapes far beyond simple circles and pills.

Combine border-radius with clip-path, transform, and rotate, and you can create organic blobs, leaves, eggs, and complex geometric shapes entirely in CSS — no SVG or Canvas needed.

The Eight-Value Syntax

The full border-radius syntax separates horizontal and vertical radii with a slash:

.element {
  border-radius: 80px 40px 60px 30px / 50px 70px 30px 60px;
}

The four values before the slash are top-left, top-right, bottom-right, bottom-left horizontal radii. The four after are the corresponding vertical radii.

When the horizontal and vertical radii differ at the same corner, you get an elliptical curve instead of a circular one — and that is the key to organic shapes.

Shape Recipes

Egg Shape

.egg {
  width: 126px;
  height: 180px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

The top corners have larger vertical radii, making the top wider. The bottom corners have smaller vertical radii, tapering the bottom.

Leaf Shape

.leaf {
  width: 120px;
  height: 160px;
  border-radius: 0 80% 0 80%;
}

Only two opposite corners are rounded, creating a pointed leaf with curves on adjacent sides.

Blob Shape

.blob {
  width: 200px;
  height: 200px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Asymmetric radii on both axes create an organic, irregular shape. No two blobs look the same — adjust the percentages to taste.

Pentagon (with clip-path)

border-radius alone cannot create straight-edged polygons. For those, use clip-path:

.pentagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

Star (with clip-path)

.star {
  width: 200px;
  height: 200px;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

Combining Border Radius and Clip-Path

You can use both properties together: clip-path defines the overall shape, and border-radius softens the clipped edges.

.soft-pentagon {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  border-radius: 10px;
}

Be aware that border-radius only softens the path where the clip allows — clipped-away corners receive no rounding.

Animating Organic Shapes

Blob shapes look dynamic when animated. Transition between two border-radius value sets:

.blob {
  width: 200px;
  height: 200px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transition: border-radius 0.8s ease;
}

.blob:hover {
  border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
}

Because each corner animates independently, the shape morphs fluidly between two organic forms.

For continuous motion, use keyframes:

@keyframes morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 30% 50% 70% / 40% 50% 60% 50%; }
  75%  { border-radius: 40% 50% 60% 50% / 60% 40% 50% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

.animated-blob {
  animation: morph 8s ease-in-out infinite;
}

Rotation for Variety

The same border-radius values create different shapes depending on the element's aspect ratio and rotation:

.leaf-variant {
  width: 100px;
  height: 180px;
  border-radius: 0 80% 0 80%;
  transform: rotate(-30deg);
}

A simple rotation transforms a leaf into a water droplet or a flame shape.

Practical Use Cases

Key Takeaways

• The eight-value border-radius syntax (horizontal/vertical) enables elliptical corners and organic shapes
• Asymmetric radii produce blobs, eggs, and leaves — no SVG needed
• Use clip-path: polygon() for straight-edged shapes that border-radius cannot create
• Combine border-radius and clip-path for soft polygon shapes
• Animate between border-radius states for morphing blob effects
• Rotation and aspect ratio multiply the variety of shapes from the same radius values

Try It Yourself

Experiment with border-radius values interactively using our Border Radius Generator. Drag individual corner controls, preview shapes in real time, and copy the CSS.

Related Guides

• Border Radius Guide — syntax, individual corners, and percentage-based shapes
• CSS Rounded Corners Tutorial — step-by-step practical examples