Propriété CSS outline-width

La propriété outline-width définit la largeur d'un contour.

Elle a les valeurs suivantes: medium, thick, thin.

Premièrement, vouz devez définir la propriété outline-style avant définir la propriété outline-width.
Valeur initiale medium
Appliquée à Tous les éléments.
Héritée Non.
Animable Oui. La largeur du contour est animable.
Version CSS2
Syntaxe DOM Object.style.outlineWidth = "thick";

Syntaxe

outline-width: medium | thin | thick | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <title>Titre du document</title>
  <head>
    <style>
      .p1{
      outline-style: solid;
      outline-width: 5px;
      }
      .p2{
      outline-style: solid;
      outline-width: 0.4em;
      }
      .p3{
      outline-style: solid;
      outline-width: thin;
      }
      .p4{
      outline-style: solid;
      outline-width: medium;
      }
      .p5{
      outline-style: solid;
      outline-width: thick;
      }
      .p6{
      outline-style: solid;
      outline-width: 0.1cm;
      }
      .p7{
      outline-style: solid;
      outline-width: 1mm;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété outline-width</h2>
    <p class="p1">C'est un paragraphe avec un contour défini à 5px.</p>
    <p class="p2">C'est un paragraphe avec un contour défini à  0.5em.</p>
    <p class="p3">C'est un paragraphe avec un contour défini à thin.</p>
    <p class="p4">C'est un paragraphe avec un contour défini à  medium.</p>
    <p class="p5">C'est un paragraphe avec un contour défini à thick.</p>
    <p class="p6">C'est un paragraphe avec un contour défini à  0.1cm.</p>
    <p class="p7">C'est un paragraphe avec un contour défini à  1 mm.</p>
  </body>
</html>

Dans l'exemple suivant, le premier élément n'a pas des bordures, le deuxième en a. Notez que le contour du deuxième élément est en dehors de sa bordure:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.ex1 {
      outline-style: solid;
      outline-width: thick;  
      }
      div.ex2 {
      border: 2px solid #1c87c9;
      outline-style: solid;
      outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété outline</h2>
    <div class="ex1">Le Lorem Ipsum est simplement du faux texte employé...</div>
    <br>
    <div class="ex2">Le Lorem Ipsum est simplement du faux texte employé...</div>
  </body>
</html>

Valeurs

Valeur Description
medium Définit un contour moyen. C'est la valeur initiale de cette propriété.
thin Définit un contour mince.
thick Définit un contour épais.
length Définit la longueur du contour.
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