Proprit 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 complte

La proprit CSS outline-width dfinit l'paisseur du contour d'un lment. Un contour est une ligne trace autour d'un lment, l'extrieur 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 bote 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 proprit raccourcie outline lors de la dfinition 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 proprit est dfinie par une seule valeur <line-width>.

<line-width>: Dfinit la largeur du contour, soit comme une longueur (<length>) explicite non ngative, soit avec les mots-cls : thin, medium ou thick. La valeur par dfaut est medium.

Dfinition formelle

Valeur initiale	`medium`
Applicabilit	tous les lments
Hrite	non
Valeur calcule	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

Cette syntaxe reflte le dernier standard selon CSS Basic User Interface Module Level 4, CSS Borders and Box Decorations Module Level 4. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Dfinir la largeur du contour d'un lment

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;
}