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.
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.
Frequently Asked Questions (FAQ)
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.
What do the eight sliders control?
Each of the four corners has a horizontal and a vertical radius slider, which is how you build blob shapes and uneven corners.
How do I use the copied CSS?
Paste it as the border-radius value in your stylesheet or style attribute — it is valid plain CSS with no framework needed.