CSS
Border-Radius Generator
Round each corner independently — including organic blob shapes.
border-radius: 30% 70% 30% 70% / 70% 30% 70% 30%;
How it works
border-radius rounds the corners of a box. Each corner can take two radii — a horizontal and a vertical one — and when they differ the corner becomes an ellipse rather than a quarter-circle. Combine four different corners and you get the organic “blob” shapes used all over modern design.
Set each corner’s Horizontal and Vertical sliders independently, or press Link corners to move them together for a simple uniform radius. The tool writes the four-value shorthand — tl tr br bl — and switches to the horizontal / vertical slash form automatically whenever a corner’s two radii differ.
Toggle between % and px to choose whether the corner scales with the element, then copy the CSS. It all runs in your browser — no network, no dependencies.
Frequently asked
How does the border-radius shorthand work?+
border-radius takes up to four values that map to the corners clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. This tool always writes the four-value form so the result is unambiguous, and it drops to the simple form automatically when every corner is round in the usual way.
How do I make an organic blob shape with border-radius?+
A blob comes from giving each corner a different horizontal and vertical radius, written with the slash syntax: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Set the Horizontal and Vertical sliders on each corner to different values here and the tool emits exactly that two-value form for you.
Should I use percentages or pixels for border-radius?+
Pixels give a fixed corner regardless of element size — good for buttons and cards where you want a consistent look. Percentages scale with the box, which is what makes pill shapes and blobs work as the element grows. Switch units here to compare; the preview and CSS update together.
How do I make a perfect circle or pill?+
For a circle, use a square element and set every corner to 50%. For a pill, use border-radius: 9999px (or any value larger than half the height) on a wider element. Link the corners here and push the radius up to see both.
Is anything sent to a server?+
No. The shape preview and the CSS are built entirely in your browser, so nothing you configure leaves the page and the tool works offline.
More free tools
All toolsCSS Selector Tester
Paste HTML, type a selector, see exactly what it matches.
Open toolCSS Grid Generator
Build a CSS grid visually and copy the code.
Open toolCSS Box-Shadow Generator
Design layered box-shadows with live sliders and copy the CSS.
Open toolMore tools shipping weekly.
Shape it, then get it signed off
This tool makes a corner tweak visible instantly. Shotline does the same for client sign-off — comments land pinned to the exact element on the live page, so “round these corners a little more” is never ambiguous again.
No signup needed. Free demo canvases stay live for 72 hours.
or start your 14-day free trial — no card required.