Propriété CSS outline-width
La propriété CSS outline-width définit l'épaisseur du contour d'un élément. Découvrez les valeurs et des exemples.
La propriété outline-width définit l'épaisseur d'un contour — la ligne tracée juste à l'extérieur de la bordure d'un élément. Elle fonctionne de manière similaire à border-width, mais avec une différence importante : un contour ne prend pas de place dans le modèle de boîte, donc modifier outline-width ne déplace jamais la mise en page des éléments environnants.
Comme le contour se situe à l'extérieur de la bordure et est exclu de la boîte, la largeur et la hauteur d'un élément n'incluent pas le contour. C'est précisément pour cette raison que les contours sont le moyen par défaut du navigateur pour afficher le focus clavier — l'anneau de focus peut apparaître et disparaître sans perturber la disposition de la page.
Cette propriété accepte les valeurs suivantes : medium, thin, thick, une <length>, initial, inherit, revert et unset.
Quand utiliser outline-width
- Indicateurs de focus. Lorsque vous personnalisez l'anneau de focus avec les pseudo-classes
:focusou:focus-visible,outline-widthcontrôle l'importance visuelle de cet anneau. Conserver un contour de focus visible est essentiel pour l'accessibilité — ne le définissez jamais à0et ne supprimez pas le contour sans fournir un autre style de focus visible. - Mise en évidence sans redistribution. Comme le contour est à l'extérieur de la boîte, un contour plus épais au survol ou au focus ne repoussera pas les éléments voisins, contrairement à ce que ferait une bordure plus épaisse.
- Débogage de la mise en page. Un rapide
outline: 1px solid redest une façon populaire de visualiser les boîtes d'éléments sans affecter leur taille.
outline-width ne prend effet que lorsque outline-style est défini sur une valeur autre que none (la valeur par défaut). Si le style est none, le contour n'a aucune largeur quelle que soit la valeur définie ici. Le raccourci outline définit la largeur, le style et la outline-color en une seule déclaration.
Les trois mots-clés correspondent à des épaisseurs définies par le navigateur plutôt qu'à des valeurs en pixels fixes, ce qui peut légèrement différer entre les navigateurs. En pratique, thin représente environ 1px, medium (la valeur par défaut) environ 3px, et thick environ 5px. Lorsque vous avez besoin d'une valeur exacte et prévisible, utilisez une <length> telle que 2px ou 0.2em.
Notez que outline-width n'accepte pas les pourcentages ni les valeurs négatives.
| Valeur initiale | medium |
|---|---|
| S'applique à | Tous les éléments. |
| Héritage | Non. |
| Animatable | Oui. La largeur du contour est animatable. |
| Version | CSS2 |
| Syntaxe DOM | Object.style.outlineWidth = "thick"; |
Syntaxe
Syntaxe CSS de outline-width
outline-width: medium | thin | thick | length | initial | inherit | revert | unset;Exemple avec plusieurs valeurs
Exemple de code CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-width: 5px;
}
.p2 {
outline-style: solid;
outline-width: 0.4em;
}
.p3 {
outline-style: solid;
outline-width: thin;
}
.p4 {
outline-style: solid;
outline-width: medium;
}
.p5 {
outline-style: solid;
outline-width: thick;
}
.p6 {
outline-style: solid;
outline-width: 0.1cm;
}
.p7 {
outline-style: solid;
outline-width: 1mm;
}
</style>
</head>
<body>
<h2>Outline-width property example</h2>
<p class="p1">This is a paragraph with outline set to 5px.</p>
<p class="p2">This is a paragraph with outline set to 0.4em.</p>
<p class="p3">This is a paragraph with outline set to thin.</p>
<p class="p4">This is a paragraph with outline set to medium.</p>
<p class="p5">This is a paragraph with outline set to thick.</p>
<p class="p6">This is a paragraph with outline set to 0.1cm.</p>
<p class="p7">This is a paragraph with outline set to 1 mm.</p>
</body>
</html>Résultat
Dans l'exemple suivant, le premier élément n'a pas de bordure, le second en a une. Notez que le contour du second élément est tracé à l'extérieur de sa bordure, avec un écart que vous pourriez élargir en utilisant outline-offset.
Contour avec une bordure
Autre exemple de code CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 2px solid #1c87c9;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Exemple de contour de base
Exemple de la propriété CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Combiner outline-width et outline-style
Exemple de la propriété CSS outline-width avec la propriété outline-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dashed;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| medium | Définit un contour moyen. C'est la valeur par défaut de cette propriété. | Essayer » |
| thin | Définit un contour fin. | Essayer » |
| thick | Définit un contour épais. | Essayer » |
| length | Définit l'épaisseur du contour. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. | |
| revert | Réinitialise la propriété à la valeur définie par l'agent utilisateur ou la cascade précédente. | |
| unset | Réinitialise la propriété à sa valeur héritée ou initiale, selon l'héritage. |
Propriétés associées
- outline — raccourci pour la largeur, le style et la couleur en une seule déclaration.
- outline-style — requis pour que la largeur soit visible.
- outline-color — définit la couleur du contour.
- outline-offset — ajoute un espace entre le contour et la bordure de l'élément.
- border-width — l'équivalent dans le modèle de boîte qui affecte la mise en page.