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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.