Générateur de Border Radius CSS — Coins Arrondis Visuels
Générez le border-radius CSS visuellement. Contrôlez chaque coin indépendamment, basculez px ou %, voyez un aperçu en direct et copiez le code. 100% dans votre navigateur.
Générateur de Border Radius CSS — Concevez des Coins Arrondis Visuellement
Créez le border-radius parfait avec un éditeur visuel. Ajustez chaque coin indépendamment ou liez-les tous ensemble, basculez entre pixels et pourcentages, regardez l’aperçu en direct et copiez le CSS prêt à l’emploi. Fini les essais-erreurs.
Fonctionnalités
- Coins indépendants : réglez haut-gauche, haut-droite, bas-droite et bas-gauche séparément
- Mode lié : changez les quatre coins d’un coup avec un seul curseur
- px ou % : changez d’unité — les pourcentages créent des courbes elliptiques douces
- Aperçu en direct : voyez la forme se mettre à jour instantanément sur un élément d’exemple
- Sortie CSS propre : copiez une seule propriété prête à coller
Comprendre border-radius
Le raccourci border-radius prend jusqu’à quatre valeurs, appliquées dans le sens horaire en partant du coin haut-gauche : haut-gauche haut-droite bas-droite bas-gauche. Une valeur de 0 donne un coin net ; des valeurs plus élevées produisent des coins plus arrondis.
px vs % — quelle différence ?
- Pixels (px) : un rayon fixe quelle que soit la taille de l’élément — prévisible et cohérent
- Pourcent (%) : relatif aux dimensions de l’élément. Régler tous les coins à 50% sur un carré le transforme en cercle parfait
Formes courantes
- Carte arrondie : 8–16px sur tous les coins
- Pilule / bouton : une grande valeur px comme 999px
- Cercle : 50% sur tous les coins (sur un élément carré)
- Bulle de dialogue : arrondissez trois coins, laissez-en un net
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Rien n’est envoyé ni stocké.