CSS - Propriété outline-style

Description.

Définit le type de trait utilisé pour les contours d'un élément (simple, double, pointillé, etc). Ne confondez pas le contour et la bordure (propriétés border) : Reportez-vous à la description de la propriété raccourcie outline pour une explication détaillée des différences entre bordures et contours.

La propriété outline-style accepte de une à quatre valeurs :

• Si une valeur unique est précisée, elle s'applique aux quatre cotés.
• Si 2 valeurs sont précisées, la première définit le style des contours haut et bas ; la deuxième des contours à gauche et à droite.
• Si 3 valeurs sont indiquées, la première définit le style du contour haut, la deuxième celui des contours droite et gauche et la troisième le style du contour bas.
• Enfin, lorsque les 4 valeurs sont indiquées, elles correspondent respectivement aux styles des contours haut, droite, bas et gauche.

Valeurs pour outline-style.

• outline-style: none;
  Pas de contour. C'est la valeur par défaut.

• outline-style: solid;
  Un trait plein.

• outline-style: double;
  Un trait double.

• outline-style: dotted;
  Un trait en pointillés (points).

• outline-style: dashed
  Un trait en pointillés (tirets).

• outline-style: groove;
  Un trait avec un effet 3D qui le présente comme une rainure en creux ⁽¹⁾.

• outline-style: ridge;
  Un trait avec un effet 3D, qui le présente comme un bourrelet ⁽¹⁾.

• outline-style: inset;
  Un trait avec effet 3D ⁽¹⁾. Les côtés haut et gauche sont assombris, tandis que les côtés bas et à droite sont éclaircis, ce qui donne l'impression que l'élément est en creux.

• outline-style: outset;
  Le contraire de inset : les traits en haut et à gauche sont éclaircis, tandis que les traits en bas et à droite sont assombris, ce qui donne une impression que l'élément est en relief ⁽¹⁾.

• outline-style: initial;

  La valeur initiale est none.

• outline-style: unset; outline-style: inherit;

  Reportez-vous à la description générale de ces valeurs.

(1) les styles de trait avec effet 3D nécessitent une épaisseur de au moins 3 pixels pour être correctement restitués. Voir la propriété outline-width pour la gestion de l'épaisseur du trait de contour.

Simulateur.

Voir aussi...

Contours - Propriétés.

• border : Résumé des propriétés des bordures.
• outline : Résumé des caractérisitques d'encadrement.
• outline-color : Définit la couleur de l'encadrement (outline).
• outline-offset : Espacement entre contour et élément.
• outline-width : Epaisseur du trait d'encadrement.