Générateur CSS border-radius
Générez rapidement une déclaration CSS border-radius avec des rayons personnalisés pour chaque coin et l'unité de votre choix.
Exécuter l’outil
Ce générateur produit une déclaration CSS `border-radius` personnalisée pour arrondir les angles d'un conteneur, d'un bouton ou d'une carte d'interface. Le formulaire prend en charge quatre valeurs distinctes correspondant aux coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche, présentées dans l'ordre conventionnel des feuilles de style web. Chaque case accepte un nombre et applique par défaut la valeur 10 lorsqu'aucun chiffre n'est renseigné. Vous pouvez aussi définir l'unité textuelle associée, fixée par défaut à `px`, ou inscrire une autre notation telle que `%`, `em` ou `rem`. Pour conserver un angle droit, il suffit d'attribuer la valeur 0 au coin concerné. Le résultat assemble directement les quatre mesures avec le suffixe sélectionné, délivrant une ligne de code prête à être copiée dans vos règles CSS pour réaliser des styles symétriques ou asymétriques.
Mode d’emploi
- Indiquez le rayon souhaité pour le coin supérieur gauche, ou laissez 10 par défaut.
- Renseignez le rayon pour le coin supérieur droit.
- Saisissez la valeur pour le coin inférieur droit.
- Précisez la valeur pour le coin inférieur gauche.
- Indiquez l'unité de mesure désirée dans le champ d'unité, ou conservez px par défaut.
- Lancez la génération pour afficher la déclaration CSS correspondante.
Exemples
- Coins uniformes en pixels : avec 15 pour chaque coin et l'unité px, la déclaration obtenue est `border-radius: 15px 15px 15px 15px;`.
- Arrondi asymétrique : avec 20 pour le coin supérieur gauche, 0 pour le supérieur droit, 20 pour l'inférieur droit, 0 pour l'inférieur gauche et l'unité px, la déclaration obtenue est `border-radius: 20px 0px 20px 0px;`.
- Format circulaire ou elliptique : avec 50 pour chaque angle et l'unité %, la déclaration obtenue est `border-radius: 50% 50% 50% 50%;`.
FAQ
Dans quel ordre sont placés les coins dans la propriété générée ?
La règle respecte l'ordre standard du CSS : coin supérieur gauche, supérieur droit, inférieur droit, puis inférieur gauche dans le sens des aiguilles d'une montre.
Que se passe-t-il si un champ de coin est laissé vide ?
Chaque champ non renseigné prend automatiquement la valeur par défaut de 10.
Quelles unités sont acceptées dans le champ d'unité ?
Le champ texte applique directement la chaîne saisie. Vous pouvez utiliser les unités CSS courantes comme px, %, em, rem ou vh selon vos besoins d'intégration.
Comment conserver un angle parfaitement droit sur un coin spécifique ?
Indiquez la valeur 0 dans le champ correspondant au coin que vous souhaitez laisser carré.