Border Radius Generator

À propos de cet outil

La propriété border-radius arrondit les coins d'un élément. Quand les quatre valeurs sont égales, une notation abrégée avec une seule valeur est utilisée. Des valeurs différentes créent des formes asymétriques — la pilule utilise 50% sur tous les coins, la feuille alterne 0% et 50%.

Cliquez sur un numéro de coin pour saisir une valeur directement, ou faites glisser le curseur lié pour modifier les quatre coins en même temps. Désactivez Verrouiller tous les coins pour contrôler chaque coin indépendamment.

Comment utiliser

1. Entrez des valeurs dans les quatre champs de coin (haut-gauche, haut-droite, bas-gauche, bas-droite).
2. Activez Verrouiller tous les coins pour définir les quatre valeurs simultanément avec le curseur.
3. Basculez entre les unités px et % selon les besoins de votre design.
4. Cliquez sur un preset (Pilule, Feuille, Blob, etc.) pour appliquer instantanément une forme prédéfinie.

Cas d'utilisation

Les designers UI utilisent border-radius pour créer des boutons, des cartes et des formes d'avatar. Les développeurs ajustent les coins arrondis pour correspondre aux systèmes de design de marque. La forme pilule (50%) est souvent utilisée pour les tags et badges. Les valeurs asymétriques créent des formes organiques de feuille ou blob pour les éléments décoratifs.

Questions fréquentes

• Quelle est la différence entre px et % ? — px donne un rayon de coin fixe quelle que soit la taille de l'élément. % est relatif à la largeur et la hauteur de l'élément — 50% sur tous les coins crée un cercle parfait (si l'élément est carré).
• Puis-je définir des rayons différents pour chaque coin ? — Oui. Décochez Verrouiller tous les coins et tapez des valeurs différentes dans chaque champ de coin.
• Que signifie la sortie abrégée ? — Quand les quatre coins sont égaux, la sortie est une seule valeur. Quand ils diffèrent, l'ordre CSS est : haut-gauche, haut-droite, bas-droite, bas-gauche.