Les bases des bordures en CSS

Maintenant, nous allons apprendre à ajouter une bordure aux éléments. Cela se fait à l'aide de trois propriétés : la propriété border-width définit l'épaisseur de la bordure, border-color - la couleur, et border-style définit le type de bordure.

Les deux premières propriétés fonctionnent de manière évidente : border-color accepte les couleurs dans le même format que la propriété color, et l'épaisseur de la bordure est définie en pixels. Mais la propriété border-style accepte des valeurs sous forme de mots-clés. Par exemple, la valeur solid définit une ligne continue.

Créons, par exemple, une bordure d'une épaisseur de 3 pixels, sous forme de ligne continue, de couleur rouge :

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* épaisseur 3px */
  border-style: solid;  /* sous forme de ligne */
  border-color: red;    /* couleur rouge */
  width: 300px;
  height: 100px;
}

Результат:

Dans les prochaines leçons, nous examinerons le travail avec les bordures plus en détail.