outline-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

La propriété outline-color permet de définir la couleur avec laquelle on trace le contour 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.

Exemple interactif

À 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.

Syntaxe

css
/* 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;

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.

Définition formelle

Valeur initialeauto
Applicabilitétous les éléments
Héritéenon
Valeur calculéePour le mot-clé auto, la valeur calculée est currentcolor. 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

Syntaxe formelle

outline-color = 
  auto        |
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

HTML

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

CSS

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

Accessibilité

L'utilisation d'un focus personnalisé s'accompagne généralement d'une modification de la propriété outline. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.

Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations Web Content Accessibility Guidelines (WCAG) requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).

Spécifications

Specification
CSS Basic User Interface Module Level 4
# outline-color

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi