CSS Border Radius Generator
Control all 8 border-radius values visually.
Create blob shapes with real-time preview.
About
The CSS Border Radius Generator lets you visually control all 8 border-radius values (horizontal and vertical radius for each of the 4 corners) and preview the result in real time.
Beyond normal rounded corners, you can create complex blob shapes like border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% — popular for hero section decorations. All processing is done locally in your browser.
How to Use
Choose a Preset
Start from a preset (Circle, Leaf, Blob, etc.) to quickly get a base shape, then fine-tune with the sliders.
Adjust Sliders
Drag the horizontal and vertical sliders for each corner. The preview updates instantly.
Copy CSS
Click "Copy" to copy the generated CSS to your clipboard and paste it into your stylesheet.
Glossary
- border-radius
- A CSS property that rounds the corners of an element. Supports px and % units for each corner independently.
- Horizontal / Vertical Radius
- The two radii of an ellipse defined by border-radius. The "/" separator splits horizontal (before) and vertical (after) values.
- Blob
- An organic, irregular shape created by setting asymmetric border-radius values on all 8 axes.
- clip-path
- A CSS property for clipping elements to custom shapes. More flexible than border-radius, but the syntax is more complex.
- Shorthand
- border-radius: 10px 20px 30px 40px — specifying all four corners in a single declaration. Use "/" to split horizontal and vertical.
FAQ
- Q.What are the 8 values?
- Each of the 4 corners has a horizontal and a vertical radius, giving 8 values total. Format: border-radius: A B C D / E F G H.
- Q.What can I use blob shapes for?
- Hero section background decoration, profile image masks, CTA button shapes, and more.
- Q.Is any data sent to a server?
- No. Everything is generated locally in your browser.
- Q.Does it work in IE11?
- border-radius works from IE9. Elliptical notation (with "/") also works from IE9+.
- Q.Can I use it with Sass or Less?
- Yes. The generated code is standard CSS, so it works directly with Sass, Less, and Stylus.
Use Cases
Button & Card Design
Create unique rounded shapes for buttons and card components beyond standard circles.
Blob Background Decoration
Use organic blob shapes for hero section backgrounds in landing pages.
Profile Image Mask
Explore unusual masks for profile pictures beyond the standard circle or square.
Learning CSS
Understand how border-radius works visually by experimenting with the sliders.
Invia feedback
Facci sapere la tua opinione per aiutarci a migliorare lo strumento.
Il feedback è temporaneamente sospeso
Il server è occupato o la protezione antispam è attiva. Riprova più tardi.