Propriété CSS border-bottom
La propriété border-bottom est une propriété raccourcie à l'aide de laquelle on peut définir la largeur, le style de ligne et la couleur de la bordure inférieure. Vous pouvez changer les places des valeurs, mais l'ordre droit est où vous définissez la largeur, le style et ensuite la couleur de la propriété border-bottom. si vous ne définissez pas le style de votre bordure, la couleur ne fonctionnera pas, car un élément doit avoir une bordure avant de changer sa couleur.
Si vous ne mentionnez pas la largeur, elle sera automatiquement de la taille moyenne. Si la couleur n'est pas mentionnée, ça va comprendre la couleur parent, et si le style n'est pas mentionné, ça ne fonctionnera pas.
border-bottom: border-width | border-style | border-color | initial | inherit;
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 8px groove #1c87c9;
}
</style>
</head>
<body>
<h2>Un titre avec une bordure inférieure bleue (groove)</h2>
</body>
</html>
Voyons un autre exemple, où on a ajouté une bordure inférieue aux éléments
<h2>,
<p> et
<div> .
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 5px dashed #1c87c9;
}
p {
border-bottom: 8px double #8ebf42;
}
div {
border-bottom: 10px ridge #ccc;
}
</style>
</head>
<body>
<h2>Un titre avec une bordure inférieure bleu et pointillée (dashed).</h2>
<p>Un paragraphe avec une double bordure inférieure.</p>
<div>Un élément div avec une bordure inférieure grise de crête (ridge). </div>
</body>
</html>
