CSS border-radius generator
Create rounded corners in CSS with a live preview: adjust each corner, link all four or create organic shapes (blobs) with the 8 border-radius values.
How to useBorder-radius and blob generator
Available in: 
CSS border-radius generator: what it is for
Adjust the four corners together or separately, in px or %, and watch the shape change instantly. In Blob mode, use the horizontal and vertical radii to create organic shapes and generate random variations. The CSS is ready to copy.
Nothing is sent to any server: everything happens in your browser.
How to use
- Choose corners or blob.
- Adjust the sliders.
- Copy the generated CSS.
When to use it
- Creating rounded buttons and cards.
- Making organic shapes for backgrounds.
- Learning the border-radius syntax.
Frequently asked questions
How do I round only some corners?
Turn off the equal corners option and adjust each one. The order in CSS is top left, top right, bottom right and bottom left.
How do I make an organic shape (blob)?
Use Blob mode: it uses the slash syntax, such as 30% 70% 70% 30% / 30% 30% 70% 70%, where the values before the slash are the horizontal radii and those after it the vertical ones.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.