What is a CSS border radius generator?

A CSS border radius generator converts corner values into a ready border-radius declaration you can paste into your stylesheet. Use the tool above to get your answer instantly - it is free and requires no signup.

How do I make a blob shape with border-radius?

Use the 8-value syntax: four different percentages before the slash for the horizontal radii and their complements after it, e.g. border-radius: 30% 70% 30% 70% / 30% 70% 30% 70%;. Enter your four corner percentages in the tool above and it builds the full string for you.

What is fancy border radius?

Fancy border radius is the 8-value border-radius syntax (horizontal radii, a slash, then vertical radii) that creates asymmetric "blob" and organic shapes instead of uniform rounded corners. This tool generates exactly that syntax from four corner percentages.

How do I make rounded corners in CSS?

Set border-radius on the element — a single value like border-radius: 12px rounds all four corners evenly. For asymmetric blob shapes, use this generator's 8-value output instead.

Can I make organic shapes with CSS border-radius?

Yes — that is exactly what the 8-value syntax is for. Pick four corner percentages between 0 and 100 in the tool above, copy the generated border-radius code, and apply it to a square element to get an organic blob.

Border Radius Generator (Blob Maker)

What is Border radius generator?

Border Radius Generator — Free border radius generator — dial in four corner percentages and copy the full 8-value CSS border-radius code for blobs and organic shapes.

The 8-value string is produced by the formula from the vendored fancy-border-radius generator (MIT, 9elements), used verbatim from its src/js/simple_control_box.js updateBorderRadius(): "top% (100-top)% (100-bottom)% bottom% / left% right% (100-right)% (100-left)%". Inputs outside 0–100 are rejected rather than clamped. This tool covers the simple four-corner mode only, not the app's advanced 8-handle mode.

Why use this border radius generator?

🎯

Built for border radius generator

Free border radius generator — dial in four corner percentages and copy the full 8-value CSS border-radius code for blobs and organic shapes.

📋

Transparent & honest

Each corner must be between 0 and 100 (percent) — out-of-range values are rejected, not clamped.

🔒

Private by design

Everything runs in your browser. Your inputs never leave your device.

📱

Works everywhere

Fully responsive — perfect on desktop, tablet, and mobile. No app needed.

🔄

Regularly updated

Regularly maintained and reviewed to ensure accuracy.

💡

Free forever

No accounts, no limits, no watermarks. Use Border Radius Generator as much as you need.

How to use Border Radius Generator

1Enter a percentage for "Top-left (%)", "Top-right (%)", "Bottom-right (%)" and "Bottom-left (%)" — each between 0 and 100.
2Run the tool to convert your four corners into the full 8-value border-radius string.
3Copy the CSS code from the result.
4Paste it onto any element — it shines on square divs and images to form blob and organic shapes.
5Tweak one corner at a time and re-run until the shape looks right.

What can you do with Border Radius Generator?

Css border radius generator — Free border radius generator — dial in four corner percentages and copy the full 8-value CSS border-radius code for blobs and organic shapes.
Make blob shape with border-radius — Free border radius generator — dial in four corner percentages and copy the full 8-value CSS border-radius code for blobs and organic shapes.
Make rounded corners in css — Free border radius generator — dial in four corner percentages and copy the full 8-value CSS border-radius code for blobs and organic shapes.
Organic shapes with css border-radius — Free border radius generator — dial in four corner percentages and copy the full 8-value CSS border-radius code for blobs and organic shapes.

Good to know

Each corner must be between 0 and 100 (percent) — out-of-range values are rejected, not clamped.
This tool implements the simple four-corner mode of the vendored app; the advanced 8-handle mode (independent horizontal/vertical radii per corner) is not supported.
Fractional percentages are rounded to two decimals in the output.

How it works

The 8-value string is produced by the formula from the vendored fancy-border-radius generator (MIT, 9elements), used verbatim from its src/js/simple_control_box.js updateBorderRadius(): "top% (100-top)% (100-bottom)% bottom% / left% right% (100-right)% (100-left)%". Inputs outside 0–100 are rejected rather than clamped. This tool covers the simple four-corner mode only, not the app's advanced 8-handle mode.

Examples

Classic blob

Status: ok — border-radius: 30% 70% 30% 70% / 30% 70% 30% 70%;

Pebble

Status: ok — border-radius: 40% 60% 45% 55% / 45% 60% 40% 55%;

Defaults with blank fields

Status: ok — blank fields fall back to the placeholder defaults (30 / 70 / 70 / 30).

People also search for these — this tool handles them all:

border radius generatorcss border radius generatormake blob shape with border-radiusmake rounded corners in cssorganic shapes with css border-radius