Border Radius Generator
Shape organic blobs and rounded corners with per-corner CSS radius control.
Generate CSS Border Radius Values and Blob Shapes
Border radius does far more than round a corner. Using percentages instead of pixels makes the curve relative to the element size, and giving each corner separate horizontal and vertical radii produces the soft organic blob shapes that have become a staple of modern landing pages.
That eight-value syntax is almost impossible to write by hand. This generator exposes it as sliders with a live preview, so you can shape something deliberately rather than pasting a blob found elsewhere.
Key features
- Per-corner control — or link all four together for uniform rounding.
- Organic blob mode — the slash syntax with separate horizontal and vertical radii per corner.
- Percentage based — shapes scale with the element instead of breaking at different sizes.
- Live preview — on a real element with a brand gradient fill.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Border Radius Generator
- Start with all corners linked
Drag any slider to round every corner equally — the fastest way to find the overall feel. - Unlink for asymmetry
Untick the link box to shape each corner independently, useful for speech bubbles and tabs. - Switch on blob mode
This enables the two-group syntax, where each corner gets a different horizontal and vertical radius. - Copy the CSS
The complete declaration is generated, including the slash separator when blob mode is active.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What is the difference between pixel and percentage border-radius?
Pixels give a fixed curve regardless of element size. Percentages are relative to the element’s own width and height, so the shape scales proportionally — and 50% on every corner turns a square into a perfect circle.
What does the slash in border-radius mean?
It separates horizontal from vertical radii. "30% 70% 70% 30% / 30% 30% 70% 70%" gives each corner an elliptical rather than circular curve, which is exactly what produces an organic blob.
How do I make a circle?
Set border-radius to 50% on a square element. If the element is not square you will get an ellipse, so fix the width and height or use aspect-ratio: 1.
What is a squircle?
A superellipse — the shape between a square and a circle used for iOS app icons. True squircles need an SVG path or CSS Houdini; border-radius produces a close approximation but the curvature transition is not identical.