Couleur du profil CSS

Couleur du profil CSS

outline-color Cette propriété est utilisée pour définir la couleur du contour.

Vous pouvez configurer la couleur de la manière suivante :

  • name - Spécifiez un nom de couleur, par exemple "red"
  • HEX - Spécifiez une valeur hexadécimale, par exemple "#ff0000"
  • RGB - Spécifiez une valeur RGB, par exemple "rgb(255,0,0)"
  • HSL - Spécifiez une valeur HSL, par exemple "hsl(0, 100%, 50%)"
  • invert - Effectue une inversion de couleur (assurez-vous que le contour est visible, peu importe la couleur du fond)

L'exemple suivant montre différents styles de contours de couleurs différentes. Veuillez noter que ces éléments ont également une fine bordure noire à l'intérieur du contour :

Profil continu rouge.

Profil pointillé bleu.

Profil saillant gris.

Exemple

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Essayez-le vous-même

Valeur HEX

Vous pouvez également utiliser une valeur hexadécimale (HEX) pour spécifier la couleur de la bordure :

Exemple

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* Rouge */
}

Essayez-le vous-même

Valeur RGB

ou en utilisant une valeur RGB :

Exemple

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* Rouge */
}

Essayez-le vous-même

Valeurs HSL

Vous pouvez également utiliser des valeurs HSL :

Exemple

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* Rouge */
}

Essayez-le vous-même

Vous pouvez consulter nos Couleurs CSS Apprenez plus sur les valeurs HEX, RGB et HSL dans cette section.

Inversion de couleur

L'exemple suivant utilise outline-color: invertExécute une inversion de couleur. Cela garantit que le contour soit visible quel que soit le fond de couleur :

Contour en ligne de couleur inversée.

Exemple

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Essayez-le vous-même