Border-Radius Blob Generator

A circle is a square with a border radius of 50%, and a blob is what you get when each corner is given a different elliptical radius. CSS has had this ability for years in the lesser-known form border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%, eight numbers separated by a slash. It lets you make organic shapes for avatars, buttons and background decorations with a single property and no image. The eight numbers are hard to guess, so this page lets you set them with sliders and shows the result immediately.

How the eight values work

Each corner of a box can be rounded with an ellipse. The ellipse has a horizontal radius and a vertical radius, both written as a percentage of the box’s own width and height. The first four numbers, before the slash, are the horizontal radii of the corners in clockwise order from the top left. The four after the slash are the vertical radii in the same order. When no slash is written, each corner uses the same value for both directions, which is why a plain border-radius: 16px gives circular corners.

A worked example

The Sample button loads a blob with horizontal radii 63, 37, 54 and 46 and vertical radii 55, 48, 52 and 45. The page writes border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;. Look at how the numbers pair up: along the top edge 63 + 37 = 100 and along the bottom 54 + 46 = 100, and down the left side 55 + 45 = 100 and the right side 48 + 52 = 100. Each side is covered exactly by its two corner radii, so there is no flat stretch, which is what gives a smooth lump. Press Circle to see all eight values at 50% shortened to border-radius: 50%;.

Random blobs

The Random blob button picks numbers within that rule: it chooses a value between 30% and 70% for one corner of each side and gives its neighbour the remainder to 100. Staying inside that range avoids shapes that are nearly square or needle-thin. Each press gives a different shape. If you like one, copy the rule or note the eight numbers, because pressing the button again replaces them.

Linking the sliders

The option “make vertical radii follow the horizontal ones” copies each horizontal slider to its vertical partner, so the shape stays circular at every corner while you change them. Turn it off for ellipses. The output simplifies itself: if the two lists are identical it drops the slash and writes four values, and if all four are equal as well it writes just one.

Edge cases

Percentages depend on the element’s size, so the same rule gives a taller or wider blob on a non-square box; use aspect-ratio: 1 for predictable shapes. If neighbouring radii exceed 100% the browser scales all radii proportionally, which can flatten your design. Borders, shadows and backgrounds follow the curve, but outlines on some older browsers stay rectangular. To morph a blob, animate or transition border-radius between two rules with the same number of values.

Limits

The tool writes percentages only, not pixels, and always in the eight-value form when the shape needs it. It makes a CSS shape, not an SVG path; use the SVG blob generator for a path you can scale or fill with a gradient. Everything runs in your browser.

Related tools

• CSS clip-path Generator cuts polygons and circles instead of rounding corners.
• SVG Blob Shape Generator makes blobs as SVG paths.
• Box Shadow Generator adds depth under the shape.
• CSS Gradient Generator fills it with colour.