CSS•Client-Side Processing

CSS Border Radius Generator

Design organic shapes with eight radius controls, linked corners, percentage or pixel units, and live sizing.

Organic radius studio

Eight independent radii, elliptical corners, and responsive percentage curves.

Radius unitLink all radii

horizontal

Top left horizontal (%)

Top right horizontal (%)

Bottom right horizontal (%)

Bottom left horizontal (%)

vertical

Top left vertical (%)

Top right vertical (%)

Bottom right vertical (%)

Bottom left vertical (%)

Your shape

Width (px)

Height (px)

Fill#6366f1

Values before the slash set horizontal radii; values after it set vertical radii. The browser scales overlapping corners to fit.

Live output · border-radius.css

.element {
  width: 280px;
  height: 240px;
  background: #6366f1;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Choose a rounded, pill, leaf, or organic blob preset.

Edit horizontal and vertical radii independently, or link all corners.

Adjust the element dimensions and fill to inspect the resulting curves.

Undo changes, then copy, download, or save the generated CSS.

It sets horizontal and vertical radii independently (e.g. 50% 20% / 10% 40%) for organic blob shapes.

Explore more free client-side developer utilities in this category