▣ CSS Border Radius Generator
Build CSS border-radius shapes visually with independent corner controls. Preview any shape live and copy the CSS. Free online border-radius generator for web designers.
How to Use
1
Drag the sliders
Use the four corner sliders to set individual border-radius values. Toggle "All" to change all corners at once.
2
See the live preview
The box updates instantly to show the exact shape your radius values create.
3
Copy the CSS
Click Copy CSS to copy the border-radius property to your clipboard.
Frequently Asked Questions
What is CSS border-radius?
border-radius rounds the corners of an element. A single value rounds all corners equally. You can specify each corner individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
How do I make a perfect circle with CSS?
Set border-radius: 50% on a square element (equal width and height). For example: width:100px; height:100px; border-radius:50%;
What is the shorthand order for border-radius?
The shorthand follows clock order: top-left, top-right, bottom-right, bottom-left. So border-radius: 10px 20px 30px 40px applies 10px to top-left, 20px to top-right, 30px to bottom-right, 40px to bottom-left.
What are elliptical border radius values?
You can create elliptical corners using the / separator: border-radius: 50px 50px 0 0 / 80px 80px 0 0 creates a semi-ellipse on top. This creates organic, pill, or teardrop shapes in CSS.
Can I use percentages for border-radius?
Yes — percentage values are relative to the element width (horizontal) and height (vertical). border-radius: 50% makes a perfect circle on square elements and an ellipse on rectangular ones.
Guide : Générateur de Border Radius CSS
Qu'est-ce que c'est ?
Le Générateur de Border Radius crée des formes CSS arrondies et organiques en contrôlant individuellement les 8 valeurs de rayon de bordure avec aperçu visuel en temps réel.
Allez au-delà des coins arrondis simples — créez des formes blob, des ovales asymétriques et des designs organiques modernes.
Comment utiliser
- Utilisez les curseurs pour ajuster les rayons des 4 coins.
- Activez le mode avancé pour contrôler les 8 valeurs (horizontal + vertical par coin).
- L'aperçu de la forme se met à jour en temps réel.
- Copiez le CSS
border-radiusgénéré.
Conseils professionnels
- Les formes blob utilisent des valeurs de pourcentage très élevées (ex. :
60% 40% 70% 30% / 30% 70% 40% 60%). - Animez
border-radiusavec des keyframes CSS pour des effets de forme organique dynamiques.