À propos de cet outil
Les coins sont réglés dans l'ordre haut gauche, haut droit, bas droit, bas gauche. Lorsque les coins sont liés, modifier l'un d'eux met à jour les trois autres pour créer rapidement des arrondis uniformes.
Mode d'emploi
- Choisissez l'unité et saisissez un rayon positif ou nul pour chaque coin.
- Activez « Lier les coins » pour conserver des valeurs identiques.
- Observez la forme de la boîte d'aperçu.
- Copiez le CSS ou réinitialisez les paramètres pour essayer une autre forme.
Exemples
- 10, 20, 30 et 40px définissent quatre rayons indépendants.
- Quatre coins de 20px donnent border-radius: 20px.
- Les coins haut gauche et bas droit à 10px, avec les deux autres à 20px, s'abrègent en 10px 20px.
border-radius: 10px 20px 30px 40px;
border-radius: 20px;Fonctionnement et explications CSS
Les quatre valeurs de border-radius suivent le sens horaire à partir du coin supérieur gauche. Quatre valeurs identiques se réduisent à une seule ; des coins opposés identiques se réduisent à deux valeurs. D'autres combinaisons peuvent aussi être abrégées. Si les rayons sont trop grands, le navigateur les réduit proportionnellement selon les règles CSS.
Utilisations courantes
- Uniformiser les coins arrondis des cartes et des boutons.
- Créer des conteneurs décoratifs aux arrondis asymétriques.
- Comprendre l'ordre des valeurs et les règles d'abréviation de border-radius.
Confidentialité
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
FAQ
Dans quel ordre les quatre coins sont-ils définis ?
Haut gauche, haut droit, bas droit, bas gauche, dans le sens horaire.
À quoi sert « Lier les coins » ?
Lorsque cette option est activée, modifier un coin recopie sa valeur sur les trois autres.
Pourquoi le résultat ne contient-il parfois qu'une ou deux valeurs ?
Des valeurs identiques peuvent utiliser la notation abrégée standard de CSS, sans modifier la forme obtenue.
Pourquoi un rayon très élevé semble-t-il plus petit que la valeur saisie ?
Si la somme des rayons adjacents dépasse les dimensions de la boîte, le navigateur réduit tous les rayons proportionnellement pour éviter leur chevauchement.