w3docs logo

Propriété CSS border-bottom-style

La propriété CSS border-bottom-style est utilisée pour spécifier le style de l'élément de la bordure inférieure.

Sans mentionner le style de border-bottom ou des propriétés de bordure, la proproété border-bottom-style ne va pas apparaitre.

La spécification ne définit pas comment les bordures des styles différents se connectent dans les coins.
Valeur initiale none
Appliquée à Tous les éléments.
Héritée Non.
Animable Non.
Version CSS1
Syntaxe DOM object.style.borderBottomStyle = "dotted";

Syntaxe

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <title>Titre du document</title>
  <head>
    <style>
      h2 {
      border-bottom-style: solid;
      }
      div {
      border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure inférieure solide</h2>
    <div>Un élément div avec une bordure inférieure de tirets(dashed).</div>
  </body>
</html>

Voyons un autre exemple avec des différents styles de la bordure inférieure.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2 {
      border-bottom-style: double;
      }
      p {
      border-style: solid;
      border-bottom-style: dashed;
      }
      div {
      border-bottom-style: groove;
      border-bottom-width: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une double bordure inférieure.</h2>
    <p> Un paragraphe avec une bordure inférieure en pointillé(dotted). </p>
    <div>Un élément div avec une bordure inférieure groove.</div>
  </body>
</html>

Valeurs

Valeur Description
none Aucune bordure. Valeur par défaut.
hidden C'est le même que "none" à l'exception de la résolution du conflict de bordure pour les élément de table.
dotted Définit une bordure pointillé.
dashed Définit une bordure de tirets.
solid Définit une bordure solide.
double Définit une double bordure.
groove Définit une 3D bordure rainurée. Son effet peut être changé avec la valeur de border-color.
ridge Définit une 3D bordure striée. Son effet peut être changé avec la valeur de border-color.
inset Définit une 3D bordure de médaillon. Son effet peut être changé avec la valeur de border-color.
outset Définit une 3D bordure de départ. Son effet peut être changé avec la valeur de border-color.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 9.2+

Pratiquez vos connaissances

Quels sont les styles de bordure inférieure en CSS mentionnés sur la page web?
Trouvez-vous cela utile?