What does the border radius generator do?

Move eight sliders to shape horizontal and vertical radii separately for blob shapes and fancy cards, then copy the CSS.

What CSS does it output?

The full eight-value border-radius syntax with horizontal values, a slash, and vertical values, which is how fancy blob shapes are built in pure CSS.

Yes. It is free, needs no signup, and runs in your browser.

Border Radius Generator

Move the eight sliders to shape the horizontal and vertical radii separately — the classic way to make blob shapes and fancy cards — and copy the CSS.

Top side — left: 30%

Top side — right: 30%

Bottom side — right: 30%

Bottom side — left: 30%

Left side — top: 30%

Right side — top: 30%

Right side — bottom: 30%

Left side — bottom: 30%

CSS code

How to use

Adjust the four horizontal and four vertical radius sliders.
Watch the preview box change shape live.
Copy the CSS and paste it into your stylesheet.

Note: The output uses the full eight-value border-radius syntax (horizontal values, a slash, then vertical values), which is how fancy blob shapes are built in pure CSS.

Border Radius Generator

How to use

Related Tools

Regex Tester

JWT Decoder

Hash Generator

UUID Generator

Unix Timestamp Converter

HTML Formatter