Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété outline

Description de la propriété outline.

outline définit les contours de l'élément. outline est une propriété raccourcie qui regroupe les valeurs de ces autres propriétés CSS.

  • outline-width : épaisseur du contour.
  • outline-style : style du contour : trait plein, pointillé, trait double, etc. Cette valeur doit obligatoirement être définie pour que le contour s'affiche.
  • outline-color : couleur du contour.

Au sujet des contours.

Ne confondez pas les contours (outline) et les bordures (border) : la principale différence est que l'épaisseur des contours ne modifie ni les dimensions de l'élément ni sa position. Les contours sont comme dessinés par dessus. Mais il existe d'autres différences :

Bordures (border) Contours (outline)
L'épaisseur des bordures s'ajoute aux dimensions de l'élément. La présence de bordure peut donc décaler les éléments qui suivent. Les contours sont dessinés par dessus les éléments et ne changent rien à leurs dimensions ni à leur position.
Les bordures peuvent être différentes sur les quatre côtés de l'élément. Les contours sont identiques sur tous les côtés.
Les éléments de type block ont une forme rectangulaire mais les éléments inline peuvent prendre des formes variées lorsqu'ils s'étendent sur plusieurs lignes. Dans ce cas, les bordures et les contours se comportent différemment.
Les bordures sont toujours composées de formes rectangulaires, éventuellement avec des coins arrondis.

Par exemple, ce texte,
qui s'étend sur plusieurs lignes,
est entouré d'une bordure.


On voit que la bordure est construite par une succession de rectangles non raccordés entre eux.
La forme des contours s'adapte à la forme de l'élément.

Par exemple, cet autre texte,
sur plusieurs lignes également,
possède un contour.


La forme du contour s'est calquée sur celle de l'élément. Le raccordement des différents parties peut être définie par box-decoration-break.
Les bordures sont positionnées sur le bord de l'élément.< Les contours peuvent être plus ou moins éloignés du bord de l'élément. Voir la propriété outline-offset.

Un explication par l'exemple. Les cadres ci-dessous ont chacun une bordure d'épaisseur différente. On voit bien que la bordure épaisse du deuxième cadre a réduit d'autant l'espace du contenu. Sur cet exemple le calcul des dimensions a été fait avec la logique box-sizing:border-box.

Cadre avec bordures
Cadre avec bordures

Dans ce deuxième exemple, le calcul des dimensions est fait avec la logique box-sizing:content-box : l'épaisseur des bordures est ajoutée aux dimensions des cadres, sans changer l'espace réservé au contenu. Mais dans ce cas comme dans le précédent, l'épaisseur des bordures modifie quelque chose, soit l'espace réservé au contenu, soit la dimension des éléments.

Cadre avec bordures
Cadre avec bordures

Dans ce troisième exemple, les cadres ont un contour au lieu d'une bordure. On voit que l'épaisseur du contour ne change rien à la dimension des cadres, ni à l'espace réservé à leur contenu. L'épaisseur des contours n'est pas comptabilisée : ils sont comme dessinés par dessus les éléments dont les dimensions sont déjà déterminées. Ce qui provoque d'ailleurs dans le deuxième cadre un chevauchement avec la bordure du parent.

Cadre avec contours
Cadre avec contours

Et c'est la même chose avec la logique box-sizing:content-box.

Cadre avec contours
Cadre avec contours

Exemples.

Cadre avec bordures (en bleu) et contours (en vert)

Puisque les contours (outline) ne changent pas la taille de l'élément, il est pratique de les appliquer avec :hover : l'ajout de contour ne provoque pas de décalage des éléments qui suivent. Dans l'exemple ci-dessous, constatez que, au survol de la souris, le premier élément décale tous les suivants, tandis que, pour un effet visuel comparable, les deux éléments suivants ne provoquent pas de décalage.

:hover ajoute une bordure
:hover ajoute un contour

Voir aussi...

Contours - Propriétés.