CSS - style bordure

La description

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.

Valeurs possibles

L'une des valeurs définies ci-dessus.

S'applique à

Tous les éléments HTML.

Syntaxe DOM

object.style.borderStyle = "Any of the values defined above";

Exemple

Voici l'exemple pour montrer 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>

Cela produira le résultat suivant -