Outline-color - Propriété CSS
Résumé des caractéristiques de la propriété outline-color
currentcolor
| invert
invert / currentcolor
outline-color
passe progressivement d'une valeur à une autre.color-name
est un des noms de couleur prédéfinis (voir les couleurs CSS).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()
ourgba()
,hsl()
ouhsla()
,hwb()
,lab()
,oklab()
,lch()
,oklch()
,color()
.
Description.
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: 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 CSS.
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 valeurcurrentColor
.
Valeurs communes à toutes les propriétés :
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
.
Animation de la propriété 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.
Simulateur.
Prise en charge par les navigateurs (compatibilité).
outline-color
.
des contours
outline-color
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique 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 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Interface utilisateur de base - Niveau 3
Pas de changement concernant la propriétéoutline-color
02 Août 2002Document de travail.07 Juillet 2015Candidat à la recommandation.14 Décembre 2017Proposé à la recommandation.21 Juin 2018Recommandation. -
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 2015Document 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.