Propriété CSS outline

Un contour (outline) est une ligne qui est déssinée en dehors des bordures. Le contour est le même sur tous les côtés. Un contour et une bordure sont similaires, mais il y a aussi beacoup de différences.

Si vous pouvez rendre les bordures cerclées à l'aide de la propriété border-radius, la propriété outline ne peut pas être cerclée.

La propriété outline permet de créer des bordures multiples autour d'un élément.

La propriété outline est une propriété raccourcie pour les propriétés suivantes :

La propriété outline-color ne fonctionne pas si elle est utilisée seule.

La largeur et la hauteur de l'élément ne comprennent pas la largeur du contour. Ça doit être spécifiée séparément.

Valeur initiale medium invert color
Appliquée à Tous les éléments. Elle est aussi appliquée à ::first-letter.
Héritée Non.
Animable Oui. Le contour de l'élément est animable.
Version CSS2
Syntaxe DOM object.style.outline = "#eee dashed 10px";

Syntaxe

outline: outline-width | outline-style | outline-color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p.dotted {outline:dotted;}
      p.dashed {outline: dashed;}
    </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>
  </body>
</html>

Dans l'exemple donné, outline-style du premier élément est en pointillé, et celui du deuxième élément est de tirets.

Dans l'exemple suivant, le premier élément n'a pas de 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: 1px solid #fc7f01;
      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>

Un autre exemple avec la propriété outline-color. Le contour est en dehors de la bordure du deuxième élément:

Exemple

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

Valeurs

Valeur Description
outline-width Définit la largeur du contour.
outline-style Définit le style du contour.
outline-color Définit la couleur 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