Générateur de Rayon de Bordure CSS
Contrôlez visuellement les 8 valeurs border-radius.
Créez des formes de gouttes avec aperçu en temps réel.
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.Quelles sont les 8 valeurs ?
- Chacun des 4 coins a un rayon horizontal et vertical, ce qui donne 8 valeurs au total. Format : bordure-rayon : A B C D / E F G H.
- Q.À quoi puis-je utiliser les formes de blob ?
- Décoration d'arrière-plan de la section Héros, masques d'image de profil, formes de boutons CTA, etc.
- Q.Des données sont-elles envoyées à un navigateur ?
- Non. Tout est généré localement dans votre navigateur.
- Q.Est-ce que ça marche dans IE11 ?
- border-radius fonctionne à partir d'IE9. La notation elliptique (avec "/") fonctionne également depuis IE9+.
- Q.Puis-je l'utiliser avec Sass ou Less ?
- Oui. Le code généré est du CSS standard, il fonctionne donc directement avec Sass, Less et Stylus.
Cas d'utilisation
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.