La propriété CSS outline-width est utilisée afin de définir l'épaisseur de la bordure (outline) d'un élément. Cette bordure est dessinée autour des éléments et délimite la boîte de bordure. Visuellement, cela permet de faire ressortir l'élément.

Syntaxe

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

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

/* Valeurs globales */
outline-width: inherit;

Valeurs

thin
La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à 1px.
medium
La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à 3px.
thick
La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à 5px.
<length>
Voir la page sur le type <length> pour les différentes valeurs correspondantes.

Syntaxe formelle

<line-width>


<line-width> = <length> | thin | medium | thick

Exemples

HTML

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="deuxpixels">2px</span>
<span id="unex">1ex</span>
<span id="deuxem">2em</span>

CSS

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

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#deuxpixels {
  outline-width: 2px;
}

#unex {
  outline-width: 1ex;
}

#deuxem {
  outline-width: 2em;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Basic User Interface Module Level 3
La définition de 'outline-width' dans cette spécification.
Recommendation Aucun changement
CSS Transitions
La définition de 'outline-width' dans cette spécification.
Version de travail outline-width peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'outline-width' dans cette spécification.
Recommendation Définition initiale.

Valeur initialemedium
Applicabilitétous les éléments
Héritéenon
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • interactive: Valeur introuvable dans la base de données
Valeur calculéeune longueur absolue ; si le mot-clé none est spécifié, la valeur calculée sera 0
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5
Support complet 1.5
Aucun support 1 — 3.6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 8Opera Support complet 7Safari Support complet 1.2WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB, Kyodev, Fredchat
Dernière mise à jour par : SphinxKnight,