La propriété border-bottom-style définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte.

Note : La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.

Syntaxe

/* Valeurs avec un mot-clé */
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

/* Valeurs globales */
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: unset;

Valeurs

<br-style>
Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes :
none
 
L'effet obtenu est le même qu'avec hidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de border-bottom-width sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, none a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.
hidden
L'effet obtenu est le même qu'avec none : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de border-bottom-width sera 0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, hidden a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
dotted
Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de border-bottom-width.
dashed
Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid
Affiche une ligne droite continue.
double
Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par border-width ou border-bottom-width.
groove
La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à ridge.
ridge
La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec groove.
inset
La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec outset). Lorsqu'elle est appliquée sur une cellule de tableau et que border-collapse vaut collapsed, cette valeur se comporte comme groove.
outset

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec border-collapse qui vaut collapsed, cette valeur se comporte comme ridge.

Syntaxe formelle

<line-style>


<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Exemples

CSS

/* On applique un style sur le tableau */
table {
  border-width: 2px;
  background-color: #52E385;
}
tr, td {
  padding: 3px;
}

/* Des exemples pour border-bottom-style */
.b1 {border-bottom-style:none;}
.b2 {border-bottom-style:hidden;}
.b3 {border-bottom-style:dotted;}
.b4 {border-bottom-style:dashed;}
.b5 {border-bottom-style:solid;}
.b6 {border-bottom-style:double;}
.b7 {border-bottom-style:groove;}
.b8 {border-bottom-style:ridge;}
.b9 {border-bottom-style:inset;}
.b10 {border-bottom-style:outset;}

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">petits points</td>
    <td class="b4">tirets</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-bottom-style' dans cette spécification.
Candidat au statut de recommandation Aucune modification significative.
CSS Level 2 (Revision 1)
La définition de 'border-bottom-style' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenone
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
IE Support complet 5.5Opera Support complet 9.2Safari Support complet 1WebView Android Support complet OuiChrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, teoli, FredB, Yuichiro, Mgjbot, Fredchat, Kyodev
Dernière mise à jour par : SphinxKnight,