En CSS, les contours sont utilisés pour tracer une ligne autour de l'extérieur d'un élément. Les contours sont similaires aux bordures, mais ils n'occupent pas d'espace dans la mise en page et sont généralement utilisés pour mettre l'accent visuel ou pour mettre en évidence des éléments.

Voici comment utiliser les contours en CSS :

Aperçu de base :

Vous pouvez définir un plan de base à l'aide de la propriété outline . Il prend trois valeurs :

 css
 .element {
  outline: [outline-color] [outline-style] [outline-width];
}

outline-color : La couleur du contour. Il peut être spécifié à l'aide d'un nom de couleur, d'un code hexadécimal, d'une valeur RVB, etc.
outline-style : Le style du contour. Cela peut être dotted , dashed , solid , double , groove , ridge , inset , outset ou none .
outline-width : La largeur du contour. Il peut être spécifié en pixels, ems, rems, etc.

Exemple:

 css
 .element {
  outline: 2px solid red;
}

Aperçu abrégé :

Vous pouvez utiliser la propriété raccourcie outline pour définir les trois valeurs à la fois :

 css
 .element {
  outline: [outline-width] [outline-style] [outline-color];
}

Exemple:

 css
 .element {
  outline: 2px solid red;
}

Décalage du contour :

Vous pouvez utiliser la propriété outline-offset pour définir l'espace entre le contour et la bordure de l'élément :

 css
 .element {
  outline-offset: 5px;
}

Suppression des contours :

Pour supprimer le contour d'un élément, vous pouvez définir la propriété outline sur none :

 css
 .element {
  outline: none;
}

Gardez à l’esprit que la suppression des contours, en particulier des éléments interactifs tels que les liens et les boutons, peut affecter l’accessibilité. Il est important de proposer des styles alternatifs ou des indicateurs visuels pour se concentrer.

Exemple:

 HTML
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .outlined {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      margin: 20px;
      outline: 2px dashed red;
    }

    .no-outline {
      width: 100px;
      height: 50px;
      background-color: lightgreen;
      margin: 20px;
      outline: none;
    }
  </style>
  <title>Outline Example</title>
</head>
<body>
  <div class="outlined">Outlined Element</div>
  <div class="no-outline">Element with No Outline</div>
</body>
</html>

Dans cet exemple, le premier div a un contour et le second n'a pas de contour. Ajustez les valeurs en fonction de vos besoins.