La propriété outline-color permet de définir la couleur avec laquelle on trace le conteur de l'élément. Ce contour est tracé autour de la boîte de bordure et peut être utilisé pour faire ressortir l'élément. À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.

La propriété outline-color est également synthétisée avec la propriété raccourcie outline.

/* Valeurs avec un mot-clé */
outline-color: invert;

/* Valeurs de couleur */
/* Type <color>       */
outline-color: red;
outline-color: #f92525;
outline-color: rgb(30,222,121);

/* Valeurs globales */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

Valeur initialeinvert, pour les navigateurs le supportant, currentColor pour les autres
Applicabilitétous les éléments
Héritéenon
Médiavisuel, interactif
Valeur calculéePour le mot-clé invert, la valeur calculée est invert. Pour la valeur de la couleur, si la valeur est transparente, la valeur calculée sera la valeur rgba() correspondante. S'il n'y en a pas, ce sera la valeur rgb() correspondante. Le mot-clé transparent correspondra à rgba(0,0,0,0).
Type d'animationune couleur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

La propriété outline-color est définie avec une des valeurs listées ci-après.

Valeurs

<color>
Voir la page <color> pour plus d'informations sur les valeurs utilisables avec ce type.
invert
Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.

Syntaxe formelle

<color> | invert


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

HTML

<p class="exemple">Mon contour est blue, da ba dee.</p>

CSS

.exemple {
  /* Tout d'abord on utiliser outline */
  /* pour définir le contour          */
  outline: 2px solid;

  /* Ensuite on précise sa couleur avec */
  /* outline-color                      */
  outline-color: #0000FF;
}

Résultat

Spécifications

Spécification Statut Commentaires
CSS Basic User Interface Module Level 3
La définition de 'outline-color' dans cette spécification.
Candidat au statut de recommandation Aucun changement
CSS Transitions
La définition de 'outline-color' dans cette spécification.
Version de travail outline-color peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'outline-color' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui

1.5

1 —? -moz-

871.2
invert Non ? Oui — 387 — 15 Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple ? ? Oui ? ? ? ?
invert ? ? ? ? ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,