Propriété CSS outline-color

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

Un contour est une ligne tracée autour d'un élément. Mais il est différent de la propriété border. Les propriétés width et height d'un élément n'incluent pas la largeur du contour car le contour n'est pas considéré comme faisant partie des dimensions de l'élément.

INFO

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

Des valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou des noms de couleurs peuvent être définies comme valeur pour la propriété outline-color. Consultez les valeurs de couleur dans la section Couleurs HTML.

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

Syntaxe

Syntaxe CSS de outline-color

css

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

Exemple de la propriété outline-color :

Exemple de code CSS outline-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #ccc;
        outline-style: double;
        outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p>Invert default value is applied.</p>
  </body>
</html>

Try it Yourself »

Résultat

CSS outline-color all values

Exemple de la propriété outline-color avec les couleurs hexadécimales, RGB, RGBA, HSL, HSLA :

Exemple de toutes les valeurs CSS outline-color

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Outline-color property example</h2>
    <p class="p1">This is a paragraph with hexadecimal blue outline.</p>
    <p class="p2">This is a paragraph with hsl yellow outline.</p>
    <p class="p3">This is a paragraph with hsla green outline.</p>
    <p class="p4">This is a paragraph with rgb red outline.</p>
    <p class="p5">This is a paragraph with rgba grey outline.</p>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Jouer
invert	Inverse toute couleur appliquée à l'arrière-plan. Cette valeur assure la visibilité du contour indépendamment de la couleur de fond. Il s'agit de la valeur par défaut de cette propriété.	Jouer »
color	Définit la couleur du contour. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.	Jouer »
initial	Définit la propriété à sa valeur par défaut.	Jouer »
inherit	Hérite la propriété de son élément parent.

Pratique

Qu'est-ce qui est vrai concernant la propriété Outline Color en CSS ?

La propriété outline-color en CSS est utilisée pour définir la couleur d'un contour.La couleur du contour peut être définie dans tous les types de CSS.Il n'est possible de définir la couleur du contour qu'en CSS3.Vous pouvez utiliser une variété de valeurs de couleur comme RGB, HEX, HSL et même des noms de couleurs.La valeur par défaut de la propriété outline-color en CSS est 'invert'.La couleur du contour est toujours solide et ne peut pas utiliser de dégradé de couleur.

Propriété CSS outline-color ​

Syntaxe ​

Exemple de la propriété outline-color : ​

Résultat ​

Exemple de la propriété outline-color avec les couleurs hexadécimales, RGB, RGBA, HSL, HSLA : ​

Valeurs ​