Propriété CSS outline-style

La propriété outline-style définit le style d'un contour.

La propriété outline-style a les valeurs suivantes:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Valeur initiale	none
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.outlineStyle = "dotted"

Syntaxe

outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .p1{
      outline-style: solid;
      }
      .p2{
      outline-style: dashed;
      }
      .p3{
      outline-style: dotted;
      }
      .p4{
      outline-style: double;
      }
      .p5{
      outline-style: none; /*hidden*/
      }
      .p6{
      outline-style: groove;
      outline-color: #ccc;
      }
      .p7{
      outline-style: ridge;
      outline-color: #ccc;
      }
      .p8{
      outline-style: inset;
      outline-color: #ccc;
      }
      .p9{
      outline-style: outset;
      outline-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété outline-style</h2>
    <p class="p1">C'est un paragraphe avec un contour défini à dashed.</p>
    <p class="p2">C'est un paragraphe avec un contour défini à dashed.</p>
    <p class="p3">C'est un paragraphe avec un contour défini à dotted.</p>
    <p class="p4">C'est un paragraphe avec un contour défini à double.</p>
    <p class="p5">C'est un paragraphe avec un contour défini à none.</p>
    <p class="p6">C'est un paragraphe avec un contour défini à groove.</p>
    <p class="p7">C'est un paragraphe avec un contour défini à ridge.</p>
    <p class="p8">C'est un paragraphe avec un contour défini à inset.</p>
    <p class="p9">C'est un paragraphe avec un contour défini à outset.</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, tous les trois propriétés outline sont comprises.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.dotted {outline: 4px dotted gray;}
      p.dashed {outline: 0.2em dashed rgb(142,191,66);}
      p.solid {outline: 4px solid #ccc;}
      p.double {outline: 4px double #000;}
      p.groove {outline: 4px groove #666;}
      p.ridge {outline: thick ridge #1c87c9;}
      p.inset {outline: medium inset #1c87c9;}
      p.outset {outline:  4px outset #1c87c9;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété outline</h2>
    <p class="dotted">Le Lorem Ipsum est simplement du faux texte employé...</p>
    <p class="dashed">Le Lorem Ipsum est simplement du faux texte employé...</p>
    <p class="solid">Le Lorem Ipsum est simplement du faux texte employé...</p>
    <p class="double">Le Lorem Ipsum est simplement du faux texte employé...</p>
    <p class="groove">Le Lorem Ipsum est simplement du faux texte employé...</p>
    <p class="ridge">Le Lorem Ipsum est simplement du faux texte employé...</p>
    <p class="inset">Le Lorem Ipsum est simplement du faux texte employé...</p>
    <p class="outset">Le Lorem Ipsum est simplement du faux texte employé...</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Aucun contour sera affiché. C'est la valeur initiale de cette propriété.
hidden	Définit un contour masqué.
dotted	Le contour est spécifié comme une série de points.
dashed	Le contour est spécifié comme une série des tirets.
solid	Le contour est spécifié comme une ligne continue.
double	Le contour est spécifié comme deux lignes continues.
groove	Spécifie un contour 3D gravé.
ridge	Spécifie un contour 3D, qui semble dépasser du document.
inset	Spécifie un contour enfoncé.
outset	Spécifie un contour gaufré.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.