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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
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 initiale | medium |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | une longueur absolue ; si le mot-clé none est spécifié, la valeur calculée sera 0 |
Type d'animation | une longueur |
Compatibilité des navigateurs
BCD tables only load in the browser