Propriété CSS `outline-width`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

La propriété CSS outline-width définit l'épaisseur du contour d'un élément. Un contour est une ligne tracée autour d'un élément, à l'extérieur de la border.

Exemple interactif

outline-width: 12px;

outline-width: thin;

outline-width: medium;

outline-width: thick;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec un contour autour.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Il est souvent plus pratique d'utiliser la propriété raccourcie outline lors de la définition de l'apparence d'un contour.

Syntaxe

css

/* Valeurs avec un mot clé */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* Valeurs de type <length> */
outline-width: 1px;
outline-width: 0.1em;

/* Valeurs globales */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;

Valeurs

Cette propriété est définie par une seule valeur <line-width>.

<line-width>: Définit la largeur du contour, soit comme une longueur (<length>) explicite non négative, soit avec les mots-clés : thin, medium ou thick. La valeur par défaut est medium.

Définition formelle

Valeur initiale	`medium`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	the absolute `<length>`, snapped as a line width
Type d'animation	une longueur

Syntaxe formelle

outline-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick

Exemples

Définir la largeur du contour d'un élément

HTML

html

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

css

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}