Profil CSS

Cet élément possède une bordure noire et un contour bleu, d'une largeur de 10px.

Profil CSS

Le contour est une ligne dessinée autour de l'élément, en dehors de la bordure, pour mettre en évidence l'élément.

CSS possède les attributs de contour suivants :

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

Attention :Le contour etBordureDifférents ! La différence réside en ce que le contour est dessiné en dehors du bord de l'élément et peut se chevaucher avec d'autres contenus. De plus, le contour n'est pas une partie de la taille de l'élément ; la largeur et la hauteur totales de l'élément ne sont pas influencées par la largeur de la ligne de contour.

Style de contour CSS

L'attribut outline-style spécifie le style de contour et peut être configuré avec les valeurs suivantes :

  • dotted - Définir un contour en pointillé.
  • dashed - Définir un contour en ligne brisée.
  • solid - Définir un contour en ligne pleine.
  • double - Définir un contour en double ligne.
  • groove - Définir un contour en creux 3D.
  • ridge - Définir un contour en rainure 3D.
  • inset - Définir un contour en creux 3D.
  • outset - Définir un contour en relief 3D.
  • none - Définir pas de contour.
  • hidden - Définir le contour caché.

L'exemple suivant montre différents valeurs de outline-style :

Exemple

Présentation de différents styles de contours :

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Résultat :

Profil en point.

Profil en tiret.

Profil en ligne continue.

Profil en double ligne.

Profil en rainure 3D. Cet effet dépend de la valeur de outline-color.

Profil en rainure 3D. Cet effet dépend de la valeur de outline-color.

Profil en creux 3D. Cet effet dépend de la valeur de outline-color.

Profil en rebord 3D. Cet effet dépend de la valeur de outline-color.

Essayez-le vous-même

Attention :À moins que outline-style Les propriétés de contour, sinon d'autres propriétés de contour (qui seront détaillées dans le prochain chapitre), n'auront aucun effet !