Accueil    CSS    Propriété outline
 



style css outline  Style CSS outline

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété outline décrit en une seule instanciation les styles applicables au contour d'un élément : la couleur l'épaisseur et le style de celui-ci.

Les propriétés CSS s'appliquant au contour d'un élément sont :
    - outline-color
    - outline-offset
    - outline-style
    - outline-width

Il n'est possible de définir les styles pour le contour que de façon globale pour les quatre côtés (pas de propriété top, left, right, bottom). D'autre part, la notion de contour ne rentre pas en ligne de compte dans la définition d'un élément et ne modifie pas sa taille (width ou height). Elle s'applique au delà de l'élément, juste après sa bordure.



Propriétés pour le style outline :




Propriété Définition Valeurs CSS
outline Initiallise toutes les propriétés du contour en une instanciation outline-style
outline-color
outline-width
CSS 2
outline-color Couleur du contour de l'élément nom couleur
valeur rgb
valeur #hexa
invert
CSS 2
outline-offset Espace entre la bordure de l'élément et son contour valeur (px, em ...)
invert
CSS 3
outline-style Apparence du contour dashed
dotted
double
groove
inset
none
outset
ridge
solid
CSS 2
outline-width Epaisseur du contour valeur (px, em ...)
thin
thick
medium
inherit
CSS 2


Exemple d'utilisation du style css outline :




Application de la propriété outline autour de deux éléments imbriqués :

<div style="border:solid 2px black; width:450px; outline:dotted 3px green;">
   <p style="margin:20px; border:dotted 2px grey; outline:dashed 2px steelblue;">
      Texte du paragraphe avec une marge de 20 pixels
   </p>
</div>


Application de la propriété outline autour de deux éléments imbriqués :


Texte du paragraphe avec une marge de 20 pixels