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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.5+ 1.2+ 7.0+


Trouvez-vous cela utile?

Articles Associées