Propriété de style de contour CSS
Exemple
Définissez un style pour le contour :
div {outline-style: dotted;}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
Un contour est une ligne tracée autour des éléments, à l'extérieur des bordures, pour faire ressortir l'élément.
La outline-style
propriété spécifie le style d'un contour.
Valeur par défaut: | rien |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS2 |
Syntaxe JavaScript : | objet .style.outlineStyle="dashed" |
Conseils et remarques
Remarque : les contours diffèrent des bordures ! Contrairement à la bordure, le contour est dessiné à l'extérieur de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, le contour ne fait PAS partie des dimensions de l'élément ; la largeur et la hauteur totales de l'élément ne sont pas affectées par la largeur du contour.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Syntaxe CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
none | Specifies no outline. This is default | |
hidden | Specifies a hidden outline | |
dotted | Specifies a dotted outline | |
dashed | Specifies a dashed outline | |
solid | Specifies a solid outline | |
double | Specifies a double outliner | |
groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Un contour en pointillé :
div {outline-style: dashed;}
Exemple
Un contour solide :
div {outline-style: solid;}
Exemple
Un double contour :
div {outline-style: double;}
Exemple
Un contour de rainure :
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
Exemple
Un contour de crête :
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
Exemple
Un plan en médaillon :
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
Exemple
Une ébauche de départ :
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
Exemple
Définissez le style d'un contour à l'aide de différentes valeurs :
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
Pages connexes
Tutoriel CSS : Plan CSS
Référence CSS : propriété outline
Référence HTML DOM : propriété outlineStyle