All tools · 🎨 Design
🟫 Border Radius Generator
Pure CSS border-radius can do more than rounded squares — set each corner individually for organic blob shapes. Drag four sliders, see a live preview, and copy the CSS.
Loading tool…
Examples
Subtle UI rounding
Output
border-radius: 8px;Pill button
Output
border-radius: 999px;Blob shape
Output
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;Frequently asked questions
Why use 999px instead of 50%?
For pill shapes you want the full height as the radius, regardless of width. 999px (or any very large value) clamps to half the height/width. 50% gives an ellipse.
Can I animate border-radius?
Yes — it transitions smoothly. CSS @keyframes blobs use this for organic morphing shapes.
What is the / syntax for?
Lets you specify separate horizontal and vertical radii per corner — needed for asymmetric blobs.
About this tool
Border Radius Generator runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 🎨 CSS Box Shadow Generator — Visual box-shadow editor with live preview. Copy CSS instantly.
- 🌈 CSS Gradient Generator — Build linear and radial CSS gradients with live preview. Copy the CSS.
- 〰️ Cubic Bézier Editor — Visual editor for CSS cubic-bezier easing curves. Live animation preview.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |