Border Radius Generator

Visualize rounded corners and blob shapes, then copy the CSS.

What Does the Border Radius Generator Do?

This generator visualizes CSS border-radius in real time. Control each corner with its own slider (or link all four), switch between pixels and percentages, and copy the resulting CSS. A Random Blob button generates organic blob shapes using the advanced eight-value slash syntax — the trick behind those fluid, amoeba-like shapes in modern illustrations and hero sections.

How to Use the Generator

  1. Drag the corner sliders — keep "Link all corners" on for uniform rounding, off for per-corner control.
  2. Toggle % mode for size-relative rounding (50% on all corners of a square = perfect circle).
  3. Hit 🫧 Random Blob Shape for organic shapes, as many times as you like.
  4. Copy the CSS and apply it to any element.

Border Radius Techniques

  • Consistent radii = design system — pick a small scale (e.g. 4px inputs, 8px buttons, 16px cards) and stick to it; mismatched rounding looks accidental.
  • Circles and pills — border-radius: 50% turns a square into a circle; border-radius: 999px makes any rectangle a pill.
  • Blob shapes — the slash syntax sets horizontal and vertical radii separately per corner: 30% 70% 70% 30% / 30% 30% 70% 70%. Every blob is one line of CSS — no SVG required.
  • Nested rounding — an inner element's radius should be the outer radius minus the padding, or the corners look misaligned.

Frequently Asked Questions

What does the slash in border-radius mean?

Values before the slash are horizontal radii, values after are vertical radii, corner by corner (top-left, top-right, bottom-right, bottom-left). Different horizontal and vertical values per corner is what makes elliptical, blob-like curves.

Why does 50% make a circle only on squares?

Percentages resolve against the element's own width (horizontal radius) and height (vertical radius). On a square both are equal → circle; on a rectangle you get an ellipse.

In what order are the four values applied?

Clockwise from top-left: top-left, top-right, bottom-right, bottom-left. Two values mean "diagonal pairs"; three mean top-left, both top-right/bottom-left, bottom-right.

Does border-radius clip child content?

Backgrounds and borders are clipped automatically, but overflowing children (like images) need overflow: hidden on the rounded parent to be clipped to the curve.