Générateur de border-radius CSS
Réglez l’arrondi de chaque coin avec des curseurs et voyez le résultat en direct. Utilisez un seul rayon, un par coin ou des rayons elliptiques pour des formes organiques, en px, % ou rem. Copiez le CSS quand il vous plaît.
Traité à 100 % dans votre navigateur
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Choisissez le mode : toutes égales, par coin ou elliptique.
- 2Déplacez les curseurs et changez l’unité si besoin.
- 3Essayez les formes rapides comme pilule, cercle ou feuille.
- 4Copiez le CSS généré et collez-le dans votre feuille de style.
Cas d’usage
- Arrondir les cartes, boutons et images d’une interface.
- Créer des formes de goutte ou organiques pour des fonds et des avatars.
- Faire un cercle parfait ou un bouton en forme de pilule.
- Comprendre la syntaxe avec barre oblique de border-radius.
Questions fréquentes
Comment faire un cercle avec border-radius ?
Utilisez 50 % sur une boîte carrée. Sur une boîte rectangulaire vous obtenez une ellipse ; pour une pilule, prenez un très grand rayon comme 999 px.
Que signifie la barre oblique dans 50% / 30% ?
Elle sépare les rayons horizontaux des verticaux. Chaque coin peut alors être une ellipse plutôt qu’un quart de cercle, ce qui permet des formes organiques.
Dans quel ordre sont les valeurs ?
Elles commencent en haut à gauche et suivent le sens horaire : haut gauche, haut droit, bas droit et bas gauche.
Vaut-il mieux utiliser px, % ou rem ?
Les px donnent un arrondi fixe, le % s’adapte à la taille de la boîte (pratique pour cercles et gouttes) et les rem suivent la taille de police de la page.