Border Radius Generator
Design corner shapes
Source Input
Processed Output
What is the Border Radius Generator?
Border-radius is more than rounded corners: separate values per corner, the slash syntax for elliptical curves, and 50% for perfect circles. This generator produces all of it plus organic blob shapes — the asymmetric multi-radius curves popular in hero sections and avatars.
Frequently Asked Questions (FAQ)
Q: How do I make a perfect pill shape?
Use border-radius: 999px on an element — any value larger than half the height creates a full pill.
How to Use the Border Radius Generator
- 1Paste your input into the editor above — or start from the preloaded example.
- 2Adjust any options, then click Run to process instantly in your browser.
- 3Review the output panel, then copy, download, or save it as a reusable snippet.