`Outline-color` - Propriété CSS

outline-color

Résumé des caractéristiques de la propriété `outline-color`

Description rapide

Définit la couleur du contour (outline).

Statut

Standard

S'applique à

Tous les éléments.

Utilisable sur

HTML

Valeurs prédéfinies

currentcolor | invert

Pourcentages

Ne s'appliquent pas.

Valeur initiale

invert | currentcolor ⁽¹⁾

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété outline-color passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Interface utilisateur de base

Références (W3C)

🡇

🡅

CSS Basic User Interface Module Level 4

Statut du document: WD (document de travail)

CSS Basic User Interface Module Level 3

Statut du document: REC (recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

(1) La valeur invert n'est pour l'instant pas reconnue par les navigateurs. La valeur initiale est donc currentColor.

Schéma de la syntaxe de `outline-color`.

Schéma syntaxique de la propriété outline-color.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

color-name est un des noms de couleur prédéfinis (voir Les couleurs).
xxxxxx est le code hexadécimal d'une couleur, sur 3, 6 ou 8 digits.
color est l'une des nombreuses fonctions reconnues par CSS pour spécifier une couleur : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété `outline-color`.

La propriété outline-color définit la couleur des contours d'un élément.

Pour que la couleur des contours soit visible, pensez aussi à définir aussi la propriété outline-style.

Pour une présentation générale des contours, reportez-vous à la page sur la propriété outline. Ainsi que pour connaître les différences entres les bordures (border) et les contours (outline).

Valeurs pour `outline-color`.

outline-color: currentcolor;

La couleur des contours sera la même que celle du texte.
outline-color: invert;

La couleur des contours sera l'inverse de celle du texte.

Remarque : la norme prévoit que la couleur par défaut des contours soit invert, mais dans la pratique, les navigateurs ne reconnaissent pas cette valeur et appliquent plutôt aux contours la couleur du texte, c'est à dire la valeur currentColor.
outline-color: green;

La couleur peut être spécifiée dans toutes les syntaxes reconnues par CSS : son nom, son code hexadécimal, ses valeurs RGB, etc. Reportez-vous à cette page sur Les couleurs.
outline-color: initial; (invert | currentcolor ⁽¹⁾) outline-color: inherit; outline-color: revert; outline-color: revertLayer; outline-color: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `outline-color`.

Comme toutes les propriétés qui traitent une couleur, outline-color peut être animée de façon très fluide d'une couleur à une autre. Sur l'exemple l'animation passe du rouge au jaune, mais en introduisant des étapes supplémentaires, on pourrait passer par toutes les couleurs de l'arc-en-ciel.

Accéder à la propriété `outline-color` par programme.

Avec Javascript, modifier la valeur de `outline-color`.

En Javascript, voici comment modifier la valeur de outline-color. Javascript, comme à son habitude, propose deux syntaxes pour réalise cela : la première avec le nom de la propriété écrit en kebab-case, et la deuxième en camel-case.


	let el = document.getElementById('id');
	el.style['outline-color'] = 'magenta';
	// ou
	let el = document.getElementById('id');
	el.style.outlineColor = 'magenta';

Avec Javascript, lire la valeur de `outline-color`.

La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS. La couleur est renvoyée sous son nom s'il s'agit d'une couleur nommée, ou sous la forme rgb(r, g, b) si elle a été définie autrement que par son nom (code hexadécimal, fonction hsl(), etc...).


	let el = document.getElementById('id');
	let value = el.style['outline-color'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.outlineColor;

Avec Javascript, lire la valeur calculée de `outline-color`.

La valeur calculée est celle qui résulte de l'évaluation de la cascade d'héritage. Si aucune valeur n'a été affectée à la propriété, ni à l'élément lui-même, ni à l'un de ses antécédents, la valeur calculée est la valeur initiale de la propriété. Quoiqu'il en soit la valeur calculée est toujours définie.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('outline-color');

Avec JQuery, modifier la valeur de `outline-color`.

JQuery permet aussi de définir la valeur de outline-color. Deux syntaxe également, comme en Javascript.


 $('#id').css('outline-color', 'magenta');
 // ou
 $('#id').css('outlineColor', 'magenta');

Avec JQuery, lire la valeur calculée de `outline-color`.


	let value = $('#id').css('outline-color');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les deux boutons ci-dessous applique la valeur saisie à la propriété et affiche ensuite cette valeur telle qu'elle a été définie (premier bouton) ou bien la valeur calculée (deuxième bouton). Cela permet de voir comment est sérialisée (mémorisée) la valeur :

Les couleurs nommées sont mémorisées sous la forme rgb(...) ou rgba().
Les code hexadécimaux également.
Les fonctions hsl() et hwb() également.
Les autres fonctions sont mémorisées sous leur nom d'origine.

Exemple interactif avec la propriété `outline-color`.

outline-color :

currentcolor

invert

Compatibilité des navigateurs avec `outline-color`.

Colonne 1

Compatibilité des navigateurs avec les contours. Les contours sont tracés après la mise en page et qui et modifie pas celle-ci.

Colonne 2

Compatibilité des navigateurs avec la propriété outline-color utilisée pour définir la couleur des contours de l'élément.

Remarques :

(1) Supporte aussi la valeur invert pour la propriété outline-color.
Ne supporte pas la propriété outline-offset.

Prise en charge
des contours

Propriété
outline-color

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `outline-color`.

La propriété outline-color est restée inchangée depuis sa première définition, en CSS version 2.xx. Mais, comme toutes les propriétés définissant une couleur, elle a suivi les évolutions de CSS en matière de spécification des couleurs : systèmes HSL, HWB, LCH... couleurs relatives, nouveaux espaces colorimétriques, etc.

CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Première définition de la propriété outline-color.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Interface utilisateur de base - Niveau 3

Pas de changement concernant la propriété outline-color

02 Août 2002
Document de travail.
07 Juillet 2015
Candidat à la recommandation.
14 Décembre 2017
Proposé à la recommandation.
21 Juin 2018
Recommandation.
Module CSS - Interface utilisateur de base - Niveau 4

Pas de changement concernant la propriété outline-color elle-même, mais de nombreuses évolutions concernant la spécification des couleurs en général.

22 Septembre 2015
Document de travail.

Voir aussi, au sujet de l'interface utilisateur.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété outline-color fait partie du module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les propriétés suivantes sont également décrites dans ce même module.