Propriété CSS border-bottom-style – Toutes les valeurs avec exemples

La propriété CSS border-bottom-style définit le style de ligne de la bordure inférieure d'un élément — qu'elle soit dessinée comme un trait continu, une série de tirets, une rainure 3D, etc. Elle contrôle uniquement le bord inférieur, laissant les trois autres côtés inchangés.

Utilisez cette propriété lorsque vous souhaitez styliser un côté indépendamment — par exemple, un séparateur de type soulignement sous un titre, ou une règle inférieure en pointillés sur une carte. Lorsque vous souhaitez le même style sur les quatre côtés, le raccourci border-style est plus concis.

La propriété border-bottom-style n'a aucun effet visible seule, sauf si une couleur et une largeur de bordure sont également présentes. Combinez-la avec border-bottom-width et border-bottom-color, ou définissez tout à la fois avec le raccourci border-bottom. L'exception est none (la valeur par défaut), qui supprime entièrement la bordure indépendamment de la largeur ou de la couleur.

Info

La spécification CSS ne définit pas comment les bordures de styles différents se rejoignent aux coins, donc les côtés adjacents avec des styles différents peuvent se rejoindre de manière spécifique au navigateur.

Valeur initiale	`none`
S'applique à	Tous les éléments.
Héritage	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;

Valeurs

Valeur	Description
`none`	Aucune bordure n'est dessinée. Valeur par défaut.
`hidden`	Même résultat visuel que `none` sur les éléments normaux, mais supprime les bordures adjacentes lors de la résolution des conflits de bordures dans les tableaux.
`dotted`	Une série de points ronds.
`dashed`	Une série de tirets courts.
`solid`	Un trait continu unique.
`double`	Deux traits solides parallèles. L'épaisseur combinée plus l'espace entre elles est égale à la valeur de `border-bottom-width`.
`groove`	Un effet 3D qui donne l'impression que la bordure est gravée dans la page. L'opposé de `ridge`.
`ridge`	Un effet 3D qui donne l'impression que la bordure est surélevée au-dessus de la page. L'opposé de `groove`.
`inset`	Un effet 3D qui donne l'impression que l'élément entier est enfoncé dans la page. L'opposé de `outset`.
`outset`	Un effet 3D qui donne l'impression que l'élément entier est surélevé hors de la page. L'opposé de `inset`.
`initial`	Définit la propriété à sa valeur par défaut (`none`).
`inherit`	Hérite de la valeur de l'élément parent.

Exemples

Bordures solid et dashed

Les valeurs les plus couramment utilisées sont solid et dashed. Ici, un titre obtient une bordure inférieure solid et un div obtient une bordure dashed.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        border-bottom-style: solid;
      }
      div {
        border-bottom-style: dashed;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a solid bottom border</h2>
    <div>A div element with a dashed bottom border.</div>
  </body>
</html>

Essayez vous-même »

Bordures double, dashed et groove

Cet exemple combine plusieurs valeurs. Notez que groove et les autres styles 3D nécessitent une bordure plus large (ici 8px) pour être visibles — les bordures fines effacent l'ombrage 3D.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>A heading with a double bottom border</h2>
    <p>A paragraph with a dashed bottom border (overrides the solid shorthand on the bottom side).</p>
    <div>A div element with a groove bottom border.</div>
  </body>
</html>

Essayez vous-même »

La valeur `hidden`

hidden semble identique à none sur un élément ordinaire, mais se comporte différemment lors de la résolution des conflits de bordures dans les tableaux : une bordure hidden l'emporte toujours et supprime la bordure de la cellule voisine.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid black;
        border-bottom-style: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Border on three sides — bottom is hidden</h1>
  </body>
</html>

Essayez vous-même »

La valeur `inset`

inset est un style 3D qui donne l'impression que la boîte est enfoncée dans la page. L'ombrage est dérivé de la couleur de la bordure, il est donc plus visible avec une bordure plus large.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: red;
        text-align: center;
        border: 5px solid;
        border-bottom-style: inset;
      }
    </style>
  </head>
  <body>
    <h1>Inset bottom border example</h1>
  </body>
</html>

Essayez vous-même »

La valeur `outset`

outset est l'opposé de inset : il donne l'impression que la boîte est surélevée hors de la page. Ensemble, inset, outset, groove et ridge sont les quatre styles de bordure 3D, et tous quatre dépendent de la couleur de la bordure pour créer leur effet d'ombrage.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-align: center;
        border: 5px solid;
        border-bottom-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Outset bottom border example</h1>
  </body>
</html>

Essayez vous-même »

Quand utiliser chaque valeur

solid — le choix par défaut pour la plupart des éléments d'interface (cartes, champs de saisie, séparateurs).
dashed et dotted — utiles pour les séparateurs secondaires, les cibles de glisser-déposer, ou tout ce qui nécessite un poids visuel plus léger qu'un trait continu.
double — parfois utilisé pour les titres décoratifs ; au moins 3px de large est nécessaire pour voir les deux lignes et l'espace entre elles.
groove / ridge — effets 3D classiques ; rarement utilisés dans les interfaces modernes à design plat, mais toujours valides.
inset / outset — peuvent simuler des effets de pression de bouton ; préférez un box-shadow pour un contrôle plus précis.
hidden — principalement un outil de mise en page pour les tableaux ; évitez sur les éléments non-tableaux où none est plus clair.

Pièges courants

Un style de bordure seul ne rend rien si border-bottom-width est 0 ou si border-bottom-color est transparent. Vérifiez toujours que les trois sous-propriétés de bordure sont définies.
Le remplacement du raccourci border-bottom après border-bottom-style remet le style à none. L'ordre des déclarations est important.
La valeur double nécessite au moins 3px de largeur pour afficher deux lignes distinctes.
Les quatre valeurs 3D (groove, ridge, inset, outset) semblent identiques à ridge/groove dans certains navigateurs lorsque la couleur de bordure est currentColor sur un fond sombre — testez toujours avec une couleur explicite.

Propriétés associées

border-bottom — raccourci pour la largeur, le style et la couleur de la bordure inférieure.
border-bottom-width — définit l'épaisseur de la bordure inférieure.
border-bottom-color — définit la couleur de la bordure inférieure.
border-style — définit le style de ligne pour les quatre côtés à la fois.
border-top-style — la propriété équivalente pour le bord supérieur.
border-left-style — la propriété équivalente pour le bord gauche.
border-right-style — la propriété équivalente pour le bord droit.

Exercice

Pratique

Lesquelles des valeurs suivantes sont valides pour la propriété border-bottom-style en CSS ?

Syntaxe

Valeurs

Exemples

Bordures solid et dashed

Bordures double, dashed et groove

La valeur hidden

La valeur inset

La valeur outset

Quand utiliser chaque valeur

Pièges courants

Propriétés associées

Exercice

La valeur `hidden`

La valeur `inset`

La valeur `outset`