CSS - couleur de la bordure

La description

La propriété border-color vous permet de changer la couleur de la bordure entourant un élément. Vous pouvez modifier individuellement la couleur des côtés inférieur, gauche, supérieur et droit de la bordure d'un élément en utilisant les propriétés -

  • border-bottom-color change la couleur de la bordure inférieure.

  • border-top-color change la couleur de la bordure supérieure.

  • border-left-color change la couleur de la bordure gauche.

  • border-right-color change la couleur de la bordure droite.

Valeurs possibles

  • color - Toute valeur de couleur valide.

  • transparent - Définit la bordure pour être invisible.

S'applique à

Tous les éléments HTML.

Syntaxe DOM

object.style.borderColor = "red";

Exemple

Voici l'exemple qui montre l'effet de toutes ces propriétés -

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

Cela produira le résultat suivant -