MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

La propriété border-bottom est une propriété raccourcie qui permet de définir les valeurs de :

Ces propriétés permettent de décrire la bordure du côté bas d'un élément.

border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed green;

Note : Comme pour les autres propriétés raccourcies, border-bottom définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :

  border-bottom-style: dotted;
  border-bottom: thick green;

est équivalent à :

  border-bottom-style: dotted;
  border-bottom: none thick green;

 et la valeur border-bottom-style fournie avant border-bottom est ignorée.

La valeur par défaut de border-bottom-style étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.

Valeurs

<br-width> 
Voir border-bottom-width.
<br-style> 
Voir border-bottom-style.
<color> 
Voir border-bottom-color.

Syntaxe formelle

<br-width> || <br-style> || <color>


<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

.exemple {
  border-bottom: 3px dotted orange;
} 

HTML

<p class="exemple">
  En passant elle prit sur un rayon un pot
  de confiture portant cette étiquette,
  « MARMELADE D’ORANGES. »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-bottom' dans cette spécification.
Candidat au statut de recommandation Pas de modification directe bien que la modification de valeurs pour border-bottom-color s'applique.
CSS Level 2 (Revision 1)
La définition de 'border-bottom' dans cette spécification.
Recommendation Aucune modification significative.
CSS Level 1
La définition de 'border-bottom' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 4 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1.0) (Oui) (Oui) (Oui) (Oui)

Étiquettes et contributeurs liés au document

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