CSS Border Radius Generator

A CSS border radius generator for corners and blobs

This CSS border radius generator covers two jobs. In Per corner mode it sets each corner of a box individually, in px or %, and writes the shortest valid border-radius shorthand. In Organic blob mode it uses the slash syntax, which gives each corner separate horizontal and vertical radii, to produce the smooth, irregular blob shapes used in hero sections and avatars.

Examples

Equal corners collapse to a single value, and matching diagonal corners to two. The Ticket preset (24/4/24/4px) produces:

.shape {
  border-radius: 24px 4px;
}

The default blob comes out as eight values:

.shape {
  border-radius: 30% 70% 30% 70% / 30% 60% 40% 70%;
}

The four values before the slash are the horizontal radii of the top-left, top-right, bottom-right and bottom-left corners; the four after it are the vertical radii in the same order.

How blob mode works

Each edge slider sets the point where the two corner curves on that edge meet. Top edge at 30% makes the top-left curve 30% wide and the top-right curve 70% wide, so the two always add up to 100% and the outline stays smooth with no flat sections. The left and right sliders do the same vertically. The Egg preset, for instance, gives 50% 50% 50% 50% / 60% 40% 60% 40%.

Tips and common mistakes

• Pill vs ellipse. The Pill preset uses 999px, which the browser scales down to half the shorter side, giving perfectly round ends at any width. 50% on a rectangle gives an ellipse instead.
• Percentages are relative. Horizontal radii use the element's width and vertical radii its height, so a % radius looks different on a wide banner than on a square.
• Too-large values are scaled. When adjacent radii add up to more than the side length, the browser reduces all radii proportionally. That is why large values stop changing the shape.
• Clip the content. Images inside a rounded box can poke out at the corners. Add overflow: hidden to the rounded element.
• Size is not in the CSS. The box width and height only size the preview; set width and height (or aspect-ratio) on your own element.

When to use border-radius vs other shapes

border-radius keeps borders, box-shadows and backgrounds following the curve, which makes it the right choice for cards, buttons and avatars. For angular shapes such as hexagons, stars or arrows, use the clip-path generator. For a random organic outline as a standalone image, the SVG blob generator exports a reusable file.

Privacy

The shape and CSS are generated in your browser; nothing is uploaded.