Make organic blob shapes from eight border-radius percentages, no SVG needed
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.A blob is a box with eight different border-radius percentages, written as two lists split by a slash. Press Random for a new shape; the facing radii on every side always add up to exactly 100%, so the curves meet smoothly without the browser shrinking them. Copy one line of CSS: no SVG file, no image, and the shape scales with the element.
Set the options you need, or start from the example.
The result is made again every time you change something.
Copy it or download it. Nothing was sent anywhere.
Rounded corners take one line of CSS, but the shorthand packs up to eight numbers into it. This generator sets them with sliders, shows the shape live and writes the shortest line that means the same thing.
Blobs. Blob mode makes organic shapes from eight percentages. Random picks new ones where the facing radii on each side add to exactly 100%, so curves meet with no flat edge and nothing is shrunk.
Paste an existing border-radius value to edit it. Units can be px, %, rem or em, one unit at a time. Nothing leaves your browser. Related tools: Box Shadow Generator, Glassmorphism Generator, CSS Gradient Generator.
The rest of the article, and all 6 questions about CSS Border Radius Generator, are on the CSS Border Radius Generator page.
Write border-radius: 12px 12px 0 0. The four values go clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. For one corner only, the longhand border-top-left-radius: 12px is clearer. Unlink the corners above and the page writes whichever form is shorter.
Values before the slash are horizontal radii and values after it are vertical radii, which makes each corner a quarter of an ellipse rather than a circle. So border-radius: 50% / 30% gives wide, flat curves. Without a slash, both radii of every corner are the same.
Give a square element border-radius: 50%. Each corner's radius becomes half the side in both directions, so the four quarter circles meet in a full circle. On a rectangle, the same 50% gives an ellipse; set equal width and height, or aspect-ratio: 1, to keep it round.
Yes. Paste a value such as 30% 70% 70% 30% / 30% 30% 70% 70%, with or without border-radius: in front, and the sliders take its values. Use one unit, px, %, rem or em; a value that mixes units or uses calc() is pointed out instead.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Border Radius Generator and anybody who knows can answer. No account needed.
Same job, other tools: Nanoid Generator – Short random nanoid IDs with your own length and alphabet, and the collision odds.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file.