border-bottom-style

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.

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

Syntaxe

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;

border-bottom-style: inherit;

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.

inherit
Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.

Syntaxe formelle

<br-style>


<br-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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 5.5 9.2 1.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

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,