CSS Border Radius Generator
Shape corners visually — blobs, pills & elliptical radii.
The CSS Border Radius Generator rounds each corner independently or in sync, supports elliptical radii, includes preset shapes like blob, organic, pill and circle, and outputs production-ready CSS.
What is a CSS Border Radius Generator?
A CSS border radius generator lets you round element corners visually and export the CSS — from simple rounded boxes to pills, circles and organic blobs. Fontily's offers per-corner and elliptical control with a live preview, so you can shape exactly what you need without writing the syntax by hand.
Features
- Per-corner control, linked or independent.
- Elliptical radii for soft, organic shapes.
- Preset shapes — blob, organic, pill, circle and rounded rectangle.
- Random generator for inspiration.
- Live preview and copy-ready CSS.
How to Use the CSS Border Radius Generator
- Drag the corner sliders, or pick a preset shape.
- Switch to Independent to edit each corner separately.
- Enable Elliptical for blob-like curves.
- Copy the generated border-radius CSS into your stylesheet.
Benefits
Border-radius syntax gets tricky once corners differ or go elliptical. A visual generator lets you experiment instantly, create trendy blob and squircle shapes, and ship clean CSS that renders consistently across browsers.
Use Cases
- Buttons, cards and avatars with rounded corners.
- Pill-shaped tags and badges.
- Organic blob backgrounds and dividers.
- Squircle app-icon style shapes.
Conclusion
Fontily's CSS Border Radius Generator turns corner shaping into a few clicks, from pills to blobs, with copy-ready CSS. Design above and paste the result into your project — free and instant.
Frequently asked questions
Pick the Blob or Organic preset, or enable Elliptical mode and set different horizontal and vertical radii on each corner.