Built-in toolFree · No signup

CSS Border Radius Generator

Generate organic CSS shapes — blobs, circles, leaves, diamonds, and more — using the full 8-value border-radius syntax. Animate morphing shapes with one click and copy the CSS keyframes.

Share on X LinkedIn

Presets

Control mode

TL horiz48%

TL vert48%

TR horiz52%

TR vert52%

BR horiz48%

BR vert48%

BL horiz52%

BL vert52%

CSS Output

border-radius: 48% 52% 48% 52%;

Was this tool helpful?

How to use

Choose a preset

Pick from Circle, Pill, Blob, Leaf, Wave, Diamond, and more to start with a solid base shape.

Select control mode

Uniform changes all corners at once. Symmetric links horizontal and vertical. Independent gives full 8-value control.

Animate it

Hit '▶ Animate' to preview a continuous morphing animation between two shape states.

Copy CSS

Get the border-radius value, or the full @keyframes animation block if animated mode is active.