Propriété CSS outline-width
La propriété outline-width définit la largeur d'un outline. Un outline est une ligne tracée autour d'un élément. Cependant, elle est différente de la propriété border.
Les propriétés width et height d'un élément n'incluent pas la largeur de l'outline car celui-ci n'est pas considéré comme faisant partie des dimensions de l'élément.
Cette propriété accepte les valeurs suivantes : medium, thin, thick, length, initial, inherit, revert et unset.
INFO
Avant de définir outline-width, vous devez définir la propriété outline-style sur une valeur autre que none pour que la largeur soit visible.
| Valeur initiale | medium |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Oui. La largeur de l'outline est animable. |
| 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 de valeurs multiples
Exemple de code CSS pour 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. Remarquez que l'outline du second élément est situé à l'extérieur de sa bordure.
Outline avec une bordure
Autre exemple de code CSS pour 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 d'outline 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>Combinaison de 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 | Tester |
|---|---|---|
| medium | Définit un outline de largeur moyenne. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
| thin | Définit un outline fin. | Tester » |
| thick | Définit un outline épais. | Tester » |
| length | Définit l'épaisseur de l'outline. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| 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. |
Pratique
Quelles sont les valeurs possibles pour la propriété 'outline-width' en CSS ?