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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.5+ 1.2+ 7.0+


Trouvez-vous cela utile?

Articles Associées