Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

outline - Propriété CSS

outline

Résumé des caractéristiques de la propriété outline

Description rapide
Résumé des caractéristiques d'encadrement.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Interface utilisateur de base
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Description de la propriété outline.

outline définit les contours de l'élément. outline est une propriété résumée qui regroupe les valeurs de ces autres propriétés CSS.

  • outline-color : couleur du contour.
  • outline-style : style du contour : trait plein, pointillé, trait double, etc. Cette valeur doit obligatoirement être définie pour que le contour s'affiche.
  • outline-width : épaisseur du contour.

Au sujet des contours.

Ne confondez pas les contours (outline) et les bordures (border) : la principale différence est que l'épaisseur des contours ne modifie ni les dimensions de l'élément ni sa position : les contours sont comme dessinés par dessus, sans interagir avec la mise en page. Mais il existe d'autres différences :

Bordures (border)
Contours (outline)
L'épaisseur des bordures s'ajoute aux dimensions de l'élément. La présence de bordure peut donc décaler vers le bas l'élément auquel on applique la bordure, ainsi que les éléments qui suivent.
Les contours sont dessinés par dessus les éléments et ne changent rien à leurs dimensions ni à leur position.
Les bordures peuvent être différentes sur les quatre côtés de l'élément.
Les contours sont identiques sur tous les côtés.
Les éléments de type block ont une forme rectangulaire mais les éléments inline peuvent prendre des formes variées lorsqu'ils s'étendent sur plusieurs lignes. Dans ce cas, les bordures et les contours se comportent différemment.
Les bordures sont toujours composées de formes rectangulaires, éventuellement avec des coins arrondis.

Par exemple, ce texte,
qui s'étend sur plusieurs lignes,
est entouré d'une bordure.


On voit que la bordure est construite par une succession de rectangles non raccordés entre eux.
La forme des contours s'adapte à la forme de l'élément.

Par exemple, cet autre texte,
sur plusieurs lignes également,
possède un contour.


La forme du contour s'est calquée sur celle de l'élément. Le raccordement des différents parties peut être définie par box-decoration-break.
Les bordures sont positionnées sur le bord de l'élément.
Les contours peuvent être plus ou moins éloignés du bord de l'élément. Voir la propriété outline-offset.

Exemple avec des dimensions mesurées sur la bordure.

Une explication par l'exemple. Les cadres ci-dessous ont, pour le premier une bordure d'épaisseur 20 pixels, et pour le second, un contour de la même épaisseur. Par ailleurs, leur propriété box-sizing est positionnée sur border-box. La bordure restreint la place réservée au contenu du bloc, contrairement au contour qui ne change pas la place disponible dans l'élément. Comme on le voit sur l'exemple, le contour peut empiéter sur les éléments voisins.

Différence entre bordure et contour avec box-sizing:border-box

 

Exemple avec des dimensions mesurées sur le contenu.

Ce deuxième exemple diffère par la propriété box-sizing qui est cette fois-ci fixée à content-box. Dans ce cas, l'épaisseur de la bordure est ajoutée aux dimensions du bloc : l'élément bleu a été décalé vers le bas et les éléments suivants sont décalés aussi. A contrario, le contour ne change pas les dimensions et ne change pas non plus la position des éléments suivants. Ce qui peut provoques un chevauchement du contour avec les éléments voisins.

Différence entre bordure et contour avec box-sizing:border-box

Exemples d'utilisation des contours outline.

Association d'une bordure et d'un contour.

Cadre avec bordures (en bleu) et contours (en vert)

Utilisation des contours avec :hover.

Puisque les contours (outline) ne changent pas la taille de l'élément, il est pratique de les appliquer avec :hover : l'ajout de contour ne provoque pas de décalage des éléments qui suivent. Dans l'exemple ci-dessous, constatez que, au survol de la souris, le premier élément, auquel on ajoute une bordure, décale tous les suivants, tandis que, pour un effet visuel comparable, l'ajout d'un contour ne provoque pas de décalage.

:hover ajoute une bordure
Cela provoque un petit décalage de l'élément et des éléments qui suivent

:hover ajoute un contour
Aucun décalage n'est provoqué par l'ajout d'un contour

Identifier la zone de saisie active.

De même, l'élément de saisie qui a le focus peut facilement être repéré par un contour différent :

Contours et coins arrondis.

Si l'élément est doté d'angles arrondis (voir border-radius),
le contour suit la forme des arrondis.

Animation de la propriété outline.

Toutes les propriétés relatives aux contours peuvent être animées, soit de façon progressive, soit de façon brutale (changement de valeur sans transition). Reportez-vous aux propriétés individuelles pour d'autres exemples d'animation.

Démonstration d'un contour animé, d'abord du blanc au noir, puis en épaisseur de 5 à 15 pixels

Prise en charge par les navigateurs (compatibilité).

Les contours (bordures ne modifiant pas la mise en page) sont bien gérés par tous les navigateurs actuels. Il en est de même pour la propriété outline.

Colonne 1
Prise en charge de la fonctionnalité permettant de dessiner le contour des éléments.
Colonne 2
Prise en charge de la propriété résumée outline.
1
Outlines
2
outline
Estimation de la prise en charge en pourcentage du parc actuel.
97%
75%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que outline.

Les spécifications CSS éditées par le W3C sont organisées en modules. outline fait partie du Module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur des élément actifs, cochés.
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
Définit la couleur et la forme du marqueur de texte.
Choisit la couleur du marqueur de texte (curseur clignotant).
Définit la forme du curseur de texte.
Définit la forme du curseur de la souris.
Définit l'accessibilité d'une zone de saisie.
Définit la couleur de l'encadrement (outline).
Définit l'espacement entre le contour et l'élément.
Définit le type de trait des contours (simple, double, pointillé...).
Définit l'épaisseur du trait d'encadrement.
Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.