outline-style
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS outline-style définit le style du contour d'un élément. Un contour est une ligne tracée autour d'un élément, à l'extérieur de la border.
Exemple interactif
outline-style: none;
outline-style: dotted;
outline-style: solid;
outline-style: groove;
outline-style: inset;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec un contour autour.
</div>
</section>
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Il est souvent plus pratique d'utiliser la propriété raccourcie outline lors de la définition de l'apparence d'un contour.
Syntaxe
/* Valeurs avec un mot-clé */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
/* Valeurs globales */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;
La propriété outline-style est définie avec une des valeurs listées ci-après.
Valeurs
auto-
Permet à l'agent utilisateur d'afficher un style de contour personnalisé.
none-
Aucun contour n'est utilisé. La
outline-widthest0. dotted-
Le contour est une série de points.
dashed-
Le contour est une série de segments de ligne courts.
solid-
Le contour est une ligne unique.
double-
Le contour est composé de deux lignes uniques. La
outline-widthest la somme des deux lignes et de l'espace entre elles. groove-
Le contour semble être gravé dans la page.
ridge-
L'opposé de
groove: le contour semble être en relief par rapport à la page. inset-
Le contour donne l'impression que la boîte est encastrée dans la page.
outset-
L'opposé de
inset: le contour donne l'impression que la boîte sort de la page.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
outline-style =
auto |
<outline-line-style>
<outline-line-style> =
none |
auto |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Exemples
Définir le style de contour sur auto
La valeur auto indique un style de contour personnalisé, décrit dans la spécification (angl.) comme « typiquement un style [qui] est soit une valeur par défaut de l'interface utilisateur pour la plateforme, soit peut-être un style plus riche que ce qui peut être décrit en détail en CSS, par exemple, un contour à bords arrondis avec des pixels extérieurs semi-translucides qui semblent briller ».
HTML
<div>
<p class="auto">Démonstration de contour</p>
</div>
CSS
.auto {
outline-style: auto; /* même résultat que "outline: auto" */
}
/* Pour rendre la démonstration plus claire */
* {
outline-width: 10px;
padding: 15px;
}
Résultat
Définir le style de contour sur dashed et dotted
HTML
<div>
<div class="dotted">
<p class="dashed">Démonstration de contour</p>
</div>
</div>
CSS
.dotted {
outline-style: dotted; /* même résultat que "outline: dotted" */
}
.dashed {
outline-style: dashed;
}
/* Pour rendre la démonstration plus claire */
* {
outline-width: 10px;
padding: 15px;
}
Résultat
Définir le style de contour sur solid et double
HTML
<div>
<div class="solid">
<p class="double">Démonstration de contour</p>
</div>
</div>
CSS
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
/* Pour rendre la démonstration plus claire */
* {
outline-width: 10px;
padding: 15px;
}
Résultat
Définir le style de contour sur groove et ridge
HTML
<div>
<div class="groove">
<p class="ridge">Démonstration de contour</p>
</div>
</div>
CSS
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
/* Pour rendre la démonstration plus claire */
* {
outline-width: 10px;
padding: 15px;
}
Résultat
Définir le style de contour sur inset et outset
HTML
<div>
<div class="inset">
<p class="outset">Démonstration de contour</p>
</div>
</div>
CSS
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
/* Pour rendre la démonstration plus claire */
* {
outline-width: 10px;
padding: 15px;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Basic User Interface Module Level 4 # outline-style |
Compatibilité des navigateurs
Voir aussi
- La propriété raccourcie
outline - La propriété
outline-width - La propriété
outline-color