Borders et Outlines

Ces deux propriétés dessinent des contours, mais leur rôle n'est pas identique.

.card { border: 1px solid #cbd5e1; }
.card:focus { outline: 2px solid #2563eb; }

• Border : fait partie de la boîte
• Outline : contour visuel externe, pratique pour le focus

Combinaison fréquente : border pour le style, outline pour l'accessibilité.

Bon reflexe UX : conserver un outline visible sur les champs et boutons focusables.

A retenir

border participe à la composition visuelle du composant. outline est souvent reservé a l'état de focus pour aider les utilisateurs clavier. Ne supprime pas les outlines sans proposer une alternative visible.

Mini pratique

Applique un border neutre sur un champ, puis un outline coloré sur :focus. Teste le rendu en naviguant sans souris.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.