CSS Border Radius Generator

A blob is made with an 8-value asymmetric border-radius such as border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. The four values before the slash set the horizontal radii of the top-left, top-right, bottom-right, and bottom-left corners, and the four after the slash set the vertical radii. Uneven values give each corner a different curve, producing an organic blob. This tool lets you drag all eight values or hit Randomize to create one instantly.

The slash separates the horizontal radii from the vertical radii. The syntax border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 applies the horizontal values to the four corners (top-left, top-right, bottom-right, bottom-left) and the vertical values to the same corners. When the horizontal and vertical radii of a corner differ, that corner becomes an ellipse rather than a quarter-circle, which is what creates fancy and organic shapes.

Percentages make shapes scale with the element — 50% turns a square into a circle, and percentage-based blobs stay proportional at any size — which is why this generator outputs the border-radius value in percent. Pixels (or rem) give fixed, predictable corners on buttons and cards regardless of element size; for that common case the tool also provides a Tailwind pixel-radius reference so you can match a rounded-* class to an exact pixel value.

Yes, for uniform shapes. A single radius on all four corners maps to Tailwind's built-in classes like rounded-lg or rounded-full, which the tool shows alongside a pixel-radius reference. Asymmetric blob and fancy shapes have no standard Tailwind equivalent, so for those the tool tells you to copy the generated CSS border-radius rule instead.

Yes. The CSS Border Radius Generator is completely free with no signup required, and it runs 100% locally in your browser. Nothing you create is uploaded to or stored on any server.