border-bottom
La propriété border-bottom
est une propriété raccourcie qui définit la bordure du côté bas d'un élément.
C'est une propriété raccourcie qui synthétise :
Ces propriétés permettent de décrire la bordure du côté bas d'un élément.
Exemple interactif
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.
Syntaxe
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed green;
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
border-bottom =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>
<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<cmyk-component> =
<number> |
<percentage>
<alpha-value> =
<number> |
<percentage>
<hue> =
<number> |
<angle> |
none
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
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. |
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter . |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Compatibilité des navigateurs
BCD tables only load in the browser