Propriété CSS outline

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.