Outline

Le contour (outline en anglais) est une ligne, colorée ou non, dessinée à l'extérieur d’une bordure entourant un élément.

En CSS, le contour est principalement utilisé pour faire ressortir un élément.

La suite de ce cours détail les différentes propriétés utilisées.

Le contour

Pour faire des contours sur la bordure d’un élément HTML et styliser ce contour, il faut utiliser une ou plusieurs des cinq propriétés suivantes :

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Remarque : Le contour n’est pas une bordure. Le contour est simplement dessiné à l’extérieur de l’élément HTML, autour de la bordure. Ainsi, le contour ne doit-il pas être pris en compte dans le calcul de la largeur et la hauteur total d’un élément HTML.

Le style de contour

Pour définir le style de contour, il faut utiliser la propriété CSS outline-style. Cette propriété peut prendre plusieurs valeurs dont voici quelques exemples :

• dotted : Définit un contour avec des points
• dashed : Définit un contour avec des pointillés
• solid : Définit un contour dit solide (avec des traits pleins)
• double : Définit un contour “double”
• none : Ne définit aucun contour
• hidden : Définit un contour caché

Remarque : La propriété outline-style doit être déclarée afin que les autres propriétés de ce cours puissent fonctionner.

Largeur du contour