Border-radius generator
Round corners and create organic blob shapes.
- Instant
- Free
- Private (processed locally)
- No sign-up
From classic rounded corners to trendy blobs
The 4 corners mode covers the everyday: buttons, cards, avatars. The blob mode uses the eight-value syntax for soft, organic shapes that are very popular in illustrations and decorative backgrounds.
-
Pick the mode
4 corners for simple rounding, blob for an organic shape.
-
Adjust the sliders
The “Randomize” button generates a unique blob in one click.
-
Copy the CSS
The full border-radius property, ready to paste.
The syntax in two examples
| Mode | Generated CSS |
|---|---|
| 4 equal corners | border-radius: 16px; |
| Default blob | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Before the / slash | Horizontal radii of the 4 corners |
| After the / slash | Vertical radii of the 4 corners |
Everything is computed in your browser. To clip an image to the shape, add overflow: hidden on the container.
Frequently asked questions
How do I round a single corner?
In “4 corners” mode, set the slider for the corner you want and leave the others at 0. The generated CSS lists the radii in the order top-left, top-right, bottom-right, bottom-left; when all values are equal, the tool writes a single value.
What is the eight-value blob syntax?
border-radius accepts horizontal and vertical radii separated by a slash “/”. For example, “30% 70% 70% 30% / 30% 30% 70% 70%” gives four corners with asymmetric radii — that is what creates those soft organic shapes.
Why use percentages instead of pixels?
Percentages are relative to the element size: the blob keeps its proportions at any dimension. Pixels are better for a fixed rounding, like a button or card with constant corners.
Does border-radius clip the content?
The border and background follow the rounding, but child content can overflow. Add “overflow: hidden” on the element so images and content are clipped to the rounded corners.