Qu’est-ce que le rayon du contour en CSS ?
Le rayon du contour en CSS décrit l’arrondi visuel des angles du contour d’un élément. CSS ne possède pas de propriété outline-radius autonome largement prise en charge ; la forme rendue suit donc généralement le rayon de la bordure de l’élément.
Fonctionnement du rayon du contour en CSS
Un contour est dessiné autour d’un élément sans intervenir dans les dimensions de sa boîte, ce qui le rend utile pour indiquer le focus sans déplacer la mise en page. Les commandes arrondies compliquent cette géométrie, car le contour se trouve à l’extérieur du bord de la bordure et sa courbe est rendue par le navigateur. Dans le CSS actuel, les auteurs combinent outline, outline-offset et border-radius ; il n’existe pas de propriété standard outline-radius à régler séparément. Ce travail relève de la mise en forme des états d’interaction et nécessite des tests visuels sur plusieurs navigateurs.
Points clés
- Contrairement à une bordure, un contour ne réserve pas d’espace et peut être non rectangulaire ; son tracé exact autour de boîtes fragmentées ou arrondies ne remplace pas la géométrie de mise en page.
- outline-offset éloigne le contour du bord de la bordure ou l’en rapproche, mais ne définit pas la courbure des angles ; cette propriété ne peut donc pas spécifier indépendamment un rayon de contour différent.
- Supprimer le contour de focus par défaut sans le remplacer par un indicateur aussi visible empêche de se repérer au clavier ; le rognage et le faible contraste devraient être vérifiés pour chaque rayon des commandes et chaque niveau de zoom.
Quand le rayon du contour en CSS compte
Vérifiez le rendu du contour lorsque vous concevez des indicateurs de focus clavier pour des boutons et des commandes arrondis. Un navigateur peut dessiner un contour différemment de la bordure ; testez donc sa visibilité plutôt que de supposer que les courbes sont identiques.