UtilityBaseDeveloper Tools
Border Radius Generator
Design rounded corners or organic blob shapes and copy the CSS border-radius, with a live preview.
Updated July 10, 2026
How to use the border radius generator
- 1Choose uniform corners or blob mode.
- 2Adjust the sliders and watch the preview.
- 3Randomize for organic blob shapes.
- 4Copy the CSS.
Common uses
- Rounding a button or card's corners
- Creating an organic blob shape
- Prototyping a UI element's look
- Getting exact border-radius CSS
Frequently asked questions
How does the CSS border-radius property work?
It rounds an element's corners. With four values they apply to the top-left, top-right, bottom-right, and bottom-left corners in that order. A slash separates horizontal and vertical radii for elliptical, blob-like curves.
How do I make an organic blob shape?
Use blob mode, which uses the eight-value percentage syntax so each corner curves unevenly. Adjust the sliders or hit randomize to get soft, asymmetric shapes popular for avatars and decoration.
Can I copy the CSS?
Yes. The generated border-radius rule updates live as you adjust the sliders, and one click copies it ready to paste into your stylesheet.
About this tool
The border radius generator builds CSS border-radius values visually. Uniform mode sets each corner with a slider for classic rounded corners, and blob mode uses the eight-value percentage syntax to make soft, organic shapes — with a randomize button for instant variations. A live preview shows the result and you copy the CSS with one click. Everything runs in your browser.
Like most tools on UtilityBase, the border radius generator runs entirely in your browser — nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more developer tools here.
Was this tool helpful?
Related tools
CSS Gradient Generator
Build a linear or radial CSS gradient visually and copy the ready-to-paste code.
Developer Tools
CSS Box Shadow Generator
Design a box-shadow visually with sliders and copy the CSS instantly.
Developer Tools
Color Converter
Convert a color between HEX, RGB, HSL, HSV, and CMYK at once, with a live swatch and copy buttons.
Image Tools
Hex to RGB Converter
Convert colors between HEX, RGB, and HSL — edit any field and the rest update.
Developer Tools
What Is My IP
Your public IP, and exactly what it reveals — location, ISP, timezone.
Developer Tools
Regex Tester
Test regular expressions live with match highlighting, groups, and a cheat sheet.
Developer Tools