Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Outline-color - Propriété CSS

outline-color

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

Description rapide
Définit la couleur de l'encadrement (outline).
Statut
Standard
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)
 🡇  
 🡅  
Statut du document: WD (document de travail)

Statut du document: REC (recommandation)

Statut du document: REC (recommandation)
outline-color - Syntax DiagramSyntax diagram of the outline-color CSS property. currentcolor currentcolor invert invert transparent transparent color-name color-name #xxxxxx #xxxxxx color coloroutline-color:;outline-color:;
Schéma syntaxique de la propriété outline-color
Syntaxe complète

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 valeur currentColor.

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.

outline-color :

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge de la fonctionnalité de tracé du contour des éléments.
Colonne 2
Prise en charge de la propriété outline-color.
1
Prise en charge
des contours
2
Propriété
outline-color
Estimation de la prise en charge globale.
97%
95%

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.

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.

Propriétés :

Définit la couleur des élément actifs, cochés.
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
caret
Définit la couleur et la forme du marqueur de texte.
Choisit la couleur du marqueur de texte (curseur clignotant).
Définit la forme du curseur de texte.
Définit la forme du curseur de la souris.
ime-mode
Définit l'accessibilité d'une zone de saisie.
Résumé des caractéristiques d'encadrement.
Définit l'espacement entre le contour et l'élément.
Définit le type de trait des contours (simple, double, pointillé...).
Définit l'épaisseur du trait d'encadrement.
Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.