Propriété CSS outline-color

La propriété outline-color définit la couleur du contour.

La propriété outline-color ne fonctionne pas si elle est utilisée seule. Elle doit être utilisée avec les propriétés outline ou outline-style.

Vous pouvez définir hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs en tant qu'une valeur pour la propriété outline-color. Voyez les valeurs de couleurs dans la section Couleurs HTML.

Valeur initiale	invert
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Oui. La couleur est animable.
Version	CSS2
Syntaxe DOM	object.style.outlineColor = "#8ebf42";

Syntaxe

outline-color: invert | color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      border: 3px solid #ccc;
      outline-style: double;
      outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété outline-color</h2>
    <p>La valeur initiale invert est appliquée.</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où les couleurs hexadecimales, RGB, RGBA, HSL, HSLA sont définies:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .p1{
      outline-style: solid;
      outline-color: #1c87c9;
      }
      .p2{
      outline-style: solid;
      outline-color: hsl(65, 100%, 50%);
      }
      .p3{
      outline-style: solid;
      outline-color: hsla(84, 49%, 50%, 1);
      }
      .p4{
      outline-style: solid;
      outline-color: rgb( 224, 0, 0);
      }
      .p5{
      outline-style: solid;
      outline-color: rgba(204,204,204,1);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété outline-color </h2>
    <p class="p1">C'est un paragraphe avec un contour bleu hexadecimal.</p>
    <p class="p2">C'est un paragraphe avec un contour jaune hsl.</p>
    <p class="p3">C'est un paragraphe avec un contour vert hsla.</p>
    <p class="p4">C'est un paragraphe avec un contour rouge rgb.</p>
    <p class="p5">C'est un paragraphe avec un contour gris rgba.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
invert	Invertit chaque couleur qui est appliquée à l'arrière-plan. Cette valeur vous permet de s'assurer que la bordure est visible. C'est la valeur initiale de cette propriété.
color	Définit la couleur du contour. Les noms des couleurs, les codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.