CSS - Propriété outline-style
Description.
Définit le type de trait utilisé pour les contours d'un élément (simple, double, pointillé, etc).
Ne confondez pas le contour et la bordure (propriétés border
) :
Reportez-vous à la description de la propriété raccourcie outline
pour une explication
détaillée des différences entre bordures et contours.
La propriété outline-style
accepte de une à quatre valeurs :
- Si une valeur unique est précisée, elle s'applique aux quatre cotés.
- Si 2 valeurs sont précisées, la première définit le style des contours haut et bas ; la deuxième des contours à gauche et à droite.
- Si 3 valeurs sont indiquées, la première définit le style du contour haut, la deuxième celui des contours droite et gauche et la troisième le style du contour bas.
- Enfin, lorsque les 4 valeurs sont indiquées, elles correspondent respectivement aux styles des contours haut, droite, bas et gauche.
Valeurs pour outline-style
.
- outline-style: none;
Pas de contour. C'est la valeur par défaut.
- outline-style: solid;
Un trait plein.
- outline-style: double;
Un trait double.
- outline-style: dotted;
Un trait en pointillés (points).
- outline-style: dashed
Un trait en pointillés (tirets).
- outline-style: groove;
Un trait avec un effet 3D qui le présente comme une rainure en creux (1).
- outline-style: ridge;
Un trait avec un effet 3D, qui le présente comme un bourrelet (1).
- outline-style: inset;
Un trait avec effet 3D (1). Les côtés haut et gauche sont assombris, tandis que les côtés bas et à droite sont éclaircis, ce qui donne l'impression que l'élément est en creux.
- outline-style: outset;
Le contraire de
inset
: les traits en haut et à gauche sont éclaircis, tandis que les traits en bas et à droite sont assombris, ce qui donne une impression que l'élément est en relief (1). - outline-style:
initial
;La valeur initiale est
none
. -
Reportez-vous à la description générale de ces valeurs.
(1) les styles de trait avec effet 3D nécessitent une épaisseur de au moins 3 pixels pour être correctement restitués.
Voir la propriété outline-width
pour la gestion de l'épaisseur du trait de contour.
Simulateur.
outline-style
:
block
inline
Voir aussi...
Contours - Propriétés.
border
: Résumé des propriétés des bordures.outline
: Résumé des caractérisitques d'encadrement.outline-color
: Définit la couleur de l'encadrement (outline).outline-offset
: Espacement entre contour et élément.outline-width
: Epaisseur du trait d'encadrement.