Bordure CSS

Bordure CSS

Dans ce chapitre, nous allons parler de border et apprendrons comment on peut donner des styles à leur. On peut donner un style, une largeur ou une couleur à notre bordure.

Premièrement, voyons les styles des bordures.

Les valeurs de style de bordure sont:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Largeur de bordure

La propriété border-width est utilisée pour définir la largeur de la bordure.

La largeur est définite en pixels, ou en utilisant l'une des trois valeurs prédéfinies: thin, medium, ou thick.

Note: La propriété border-width ne fonctionne pas si elle est utilisée seule. Utilisez la propriété border-style pour définir tout d'abord la bordure.

Couleur de bordure

La propriété border-color est utilisée pour définir la couleur de la bordure. La couleur peut être définie par:

  • name - spécifier un nom de la couleur, comme "red"
  • RGB - spécifier une valeur RGB, comme "rgb(255,0,0)"
  • Hex - spécifier une valeur hex, comme "#ff0000"

Note: La propriété border-color ne fonctionne pas si elle est utilisée seule. Utilisez la propriété border-style pour définir tout d'abord les bordures.

En général, on écrit ces 3 propriétés ensemble sur une ligne.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Exemple avec une bordure bleu en pointillé.</p>
    <p style="border:3px dashed #ffff00"> Exemple avec une bordure jaune de tirets. </p>
    <p style="border:3px solid #8ebf42"> Exemple avec une bordure verte solide.</p>
  </body>
</html>

Vous pouvez voir d'autres exemples avec notre outile Créateur CSS.




Trouvez-vous cela utile?

Articles Associées