CSS - Bordures

Les propriétés de la bordure vous permettent de spécifier l'apparence de la bordure de la boîte représentant un élément. Il y a trois propriétés d'une bordure que vous pouvez modifier -

le border-color spécifie la couleur d'une bordure.
le border-style spécifie si une bordure doit être unie, une ligne pointillée, une ligne double ou l'une des autres valeurs possibles.
le border-width spécifie la largeur d'une bordure.

Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.

La propriété border-color

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.

L'exemple suivant 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>

Il produira le résultat suivant -

La propriété border-style

La propriété border-style vous permet de sélectionner l'un des styles de bordure suivants -

none- Pas de frontière. (Équivalent de la largeur de la bordure: 0;)
solid - La bordure est une seule ligne continue.
dotted - La bordure est une série de points.
dashed - Border est une série de lignes courtes.
double - La bordure est constituée de deux lignes pleines.
groove - La bordure semble être gravée dans la page.
ridge - La bordure ressemble à l'opposé de la rainure.
inset - La bordure donne l'impression que la boîte est intégrée à la page.
outset - La bordure donne l'impression que la boîte sort de la toile.
hidden - Identique à aucun, sauf en termes de résolution des conflits de frontières pour les éléments de table.

Vous pouvez modifier individuellement le style des bordures inférieure, gauche, supérieure et droite d'un élément à l'aide des propriétés suivantes:

border-bottom-style change le style de la bordure inférieure.
border-top-style change le style de la bordure supérieure.
border-left-style change le style de la bordure gauche.
border-right-style change le style de la bordure droite.

L'exemple suivant montre tous ces styles de bordure -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

Il produira le résultat suivant -

La propriété border-width

La propriété border-width vous permet de définir la largeur des bordures d'un élément. La valeur de cette propriété peut être une longueur en px, pt ou cm ou elle doit être définie sur mince, moyen ou épais.

Vous pouvez modifier individuellement la largeur des bordures inférieure, supérieure, gauche et droite d'un élément à l'aide des propriétés suivantes:

border-bottom-width modifie la largeur de la bordure inférieure.
border-top-width modifie la largeur de la bordure supérieure.
border-left-width modifie la largeur de la bordure gauche.
border-right-width modifie la largeur de la bordure droite.

L'exemple suivant montre toutes ces largeurs de bordure -

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

Il produira le résultat suivant -

Propriétés de bordure à l'aide de raccourcis

La propriété border vous permet de spécifier la couleur, le style et la largeur des lignes dans une propriété -

L'exemple suivant montre comment utiliser les trois propriétés dans une seule propriété. Il s'agit de la propriété la plus fréquemment utilisée pour définir une bordure autour d'un élément.

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

Il produira le résultat suivant -