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-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 (1).

  • outline-style: ridge;

    Un trait avec un effet 3D, qui le présente comme un bourrelet (1).

  • outline-style: inset;

    Un trait avec effet 3D (1). 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 (1).

  • 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.

outline-style :
Contour appliqué à un élément du type block
Contour appliqué à un élément du type inline

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.