Syntaxe de Border Radius
La propriété CSS border-radius utilisé une notation abregee. Une valeur s'applique à tous les coins. Deux valeurs définissent les paires haut-gauche/bas-droit et haut-droit/bas-gauche. Trois valeurs définissent haut-gauche, haut-droit/bas-gauche et bas-droit. Quatre valeurs définissent chaque coin dans le sens horaire.
Créer des cercles et des ellipses
Un cercle parfait nécessité border-radius: 50% sur un élément avec une largeur et une hauteur egales. Pour les formes elliptiques, utilisez la notation avec barre oblique : border-radius: 50% / 25% créé une ellipse horizontale. Cette syntaxe avancée permet de définir les rayons horizontal et vertical séparément.
Coins arrondis dans les systèmes de design
Les systèmes de design définissent typiquement une échelle de tokens de border-radius de none (0) a full (9999px). Les échelles courantes incluent sm (4px), md (8px), lg (16px), xl (24px) et full (9999px). L'utilisation cohérente de ces tokens assure l'harmonie visuelle.
Support navigateur et replis
CSS border-radius beneficie d'un support universel dans tous les navigateurs modernes. Aucun prefixe de fournisseur n'est requis. Les navigateurs plus anciens afficheront simplement des coins carres comme repli gracieux, rendant son utilisation sure sans logique conditionnelle.
