Propriété CSS outline-style
La propriété CSS outline-style permet de définir le style du contour d'un élément. Découvrez ses valeurs et des exemples.
La propriété CSS outline-style définit le style de ligne du contour d'un élément — par exemple une ligne solid, dashed ou dotted. Un contour (outline) est une ligne tracée juste à l'extérieur de la bordure de l'élément, autour des quatre côtés simultanément.
Cette page explique à quoi ressemble chaque style de contour, en quoi outline-style diffère de border-style, et présente des exemples interactifs pour chaque valeur.
Pourquoi utiliser un contour ?
Les contours sont le plus souvent utilisés pour rendre le focus visible. Lorsqu'un utilisateur navigue au clavier vers un lien, un bouton ou un champ de formulaire, le navigateur dessine un contour pour indiquer l'élément actif. Supprimer ce contour sans le remplacer nuit à l'accessibilité au clavier ; préférez donc le redéfinir plutôt que de le supprimer.
Le contour diffère de la border sur deux points importants :
- Il n'occupe pas d'espace. Le contour est peint à l'extérieur du bord de la bordure et n'affecte pas la mise en page : ajouter ou modifier un contour ne déplace jamais les éléments environnants. La width et la height de l'élément n'incluent pas le contour.
- Il ne peut pas être contrôlé côté par côté ni par coin. Contrairement aux bordures, vous ne pouvez pas définir un contour différent pour un seul côté, et un contour basique suit la boîte, pas son
border-radius.
Pour qu'un contour soit visible, outline-style doit être défini sur une valeur autre que none — c'est cette propriété qui « active le contour ». Combinez-la avec outline-color et outline-width, ou utilisez le raccourci outline pour définir les trois en une seule fois.
La propriété outline-style accepte les valeurs suivantes :
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Les valeurs groove, ridge, inset et outset créent un effet 3D en ombrant le contour en fonction de la outline-color. L'effet est le plus visible avec une épaisseur importante et une couleur de tonalité moyenne — il est presque invisible sur du noir ou du blanc pur.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Non. |
| Animable | Non. |
| Version | CSS2 |
| Syntaxe DOM | object.style.outlineStyle = "dotted" |
Syntaxe
Syntaxe CSS de outline-style
outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple de la propriété outline-style :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
}
.p2 {
outline-style: dashed;
}
.p3 {
outline-style: dotted;
}
.p4 {
outline-style: double;
}
.p5 {
outline-style: none;/*hidden*/
}
.p6 {
outline-style: groove;
outline-color: #ccc;
}
.p7 {
outline-style: ridge;
outline-color: #ccc;
}
.p8 {
outline-style: inset;
outline-color: #ccc;
}
.p9 {
outline-style: outset;
outline-color: #ccc;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="p1">This is a paragraph with outline set to solid.</p>
<p class="p2">This is a paragraph with outline set to dashed.</p>
<p class="p3">This is a paragraph with outline set to dotted.</p>
<p class="p4">This is a paragraph with outline set to double.</p>
<p class="p5">This is a paragraph with outline set to none.</p>
<p class="p6">This is a paragraph with outline set to groove.</p>
<p class="p7">This is a paragraph with outline set to ridge.</p>
<p class="p8">This is a paragraph with outline set to inset.</p>
<p class="p9">This is a paragraph with outline set to outset.</p>
</body>
</html>Résultat
Exemple de la propriété outline-style avec toutes les valeurs :
CSS outline-style another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: 4px dotted gray;
}
p.dashed {
outline: 0.2em dashed rgb(142, 191, 66);
}
p.solid {
outline: 4px solid #ccc;
}
p.double {
outline: 4px double #000;
}
p.groove {
outline: 4px groove #666;
}
p.ridge {
outline: thick ridge #1c87c9;
}
p.inset {
outline: medium inset #1c87c9;
}
p.outset {
outline: 4px outset #1c87c9;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="solid">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="double">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="groove">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="ridge">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="inset">Lorem Ipsum is simply dummy text of the printing...</p>
<p class="outset">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Ce deuxième exemple utilise le raccourci outline pour définir le style, l'épaisseur et la couleur ensemble — par exemple outline: 4px dotted gray.
Exemple de la propriété outline-style avec la valeur « groove » :
Example of the outline-style property with the groove value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #7f7fa7;
text-align: center;
outline-width: 8px;
outline-style: groove;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to groove.</p>
</body>
</html>Exemple de la propriété outline-style avec la valeur « ridge » :
Example of the outline-style property with the ridge value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: ridge;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to ridge.</p>
</body>
</html>Exemple de la propriété outline-style avec la valeur « inset » :
Example of the outline-style property with the inset value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: inset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to inset.</p>
</body>
</html>Exemple de la propriété outline-style avec la valeur « outset » :
Example of the outline-style property with the outset value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 8px;
outline-style: outset;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to outset.</p>
</body>
</html>Exemple de la propriété outline-style avec la valeur « dotted » :
Example of the outline-style property with the dotted value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dotted;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dotted.</p>
</body>
</html>Exemple de la propriété outline-style avec la valeur « dashed » :
Example of the outline-style property with the dashed value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: #69afad;
text-align: center;
outline-width: 4px;
outline-style: dashed;
padding: 10px;
}
</style>
</head>
<body>
<h1>Outline property example</h1>
<p>This is a paragraph with outline set to dashed.</p>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | N'affiche aucun contour. C'est la valeur par défaut de cette propriété. | Play it » |
| hidden | Identique à none pour les contours (la valeur existe par cohérence avec border-style). | Play it » |
| dotted | Le contour est affiché sous forme d'une série de points. | Play it » |
| dashed | Le contour est affiché sous forme d'une série de tirets. | Play it » |
| solid | Le contour est affiché sous forme d'une ligne pleine. | Play it » |
| double | Le contour est affiché sous forme d'une double ligne pleine. | Play it » |
| groove | Spécifie un contour 3D en creux. | Play it » |
| ridge | Spécifie un contour 3D en relief. | Play it » |
| inset | Spécifie un contour encastré. | Play it » |
| outset | Spécifie un contour en saillie. | Play it » |
| initial | Définit la propriété à sa valeur par défaut. | Play it » |
| inherit | Hérite la propriété de son élément parent. |
Conseils et pièges courants
outline-styleseul peut être invisible. Sans largeur ni couleur définies, la largeur de contour par défaut estmediumet la couleur estcurrentColor, donc il s'affiche généralement — mais si vous définissezoutline-width: 0, il n'apparaîtra pas. Utilisez le raccourci outline pour être explicite.- Ne supprimez pas simplement les contours de focus.
outline: nonesupprime l'anneau de focus clavier. Si un design l'exige, remplacez-le par un contour personnalisé ou un style de focusbox-shadowafin que les utilisateurs clavier puissent toujours voir le focus. - Utilisez
outline-offsetpour aérer. Comme le contour est collé à la bordure par défaut, la propriétéoutline-offsetpermet de l'écarter vers l'extérieur (ou vers l'intérieur avec une valeur négative) sans affecter la mise en page. - Contour vs bordure. Utilisez un outline lorsque vous avez besoin d'un indicateur qui ne doit pas modifier la taille ou la position de la boîte ; utilisez une border lorsque la ligne fait partie de la mise en page de l'élément.
Propriétés associées
- outline — raccourci pour
outline-width,outline-styleetoutline-color. - outline-color — définit la couleur du contour.
- outline-width — définit l'épaisseur du contour.
- border — l'équivalent du contour qui occupe de l'espace dans la mise en page.