border-bottom

Syntaxe

Paramètres

Description

Cette propriété permet de définir le format de la bordure inférieur d'un élément comme un tableau par exemple.

Remarques

• Voici les spécifications recommandé par le «w3c» en 17 couleurs :

Brun (maroon) #800000 Rouge (red) #ff0000 Orange (orange) #ffA500 Jaune (yellow) #ffff00 Olive (olive) #808000 Pourpre (purple) #800080 Magenta (fuchsia) #ff00ff Blanc (white) #ffffff Vert claire (lime) #00ff00 Vert (green) #008000

Bleu marin (navy) #000080 Bleu (blue) #0000ff Cyan (aqua) #00ffff Vert/bleu (teal) #008080

Noir (black) #000000 Gris claire (silver) #c0c0c0 Gris foncé (gray) #808080

• Définition de la bordure inférieure : La propriété border-bottom permet de définir la bordure située au bas d'un élément. Elle est utilisée pour ajouter un effet visuel en dessous de l'élément, ce qui peut être utile pour séparer des sections, mettre en valeur un texte ou ajouter des éléments décoratifs dans un design.
• Impact sur la mise en page : La bordure inférieure affecte la disposition de l'élément en ajoutant de l'espace autour de celui-ci. Par exemple, une bordure de 10px ajoutera un espace de 10px sous l'élément, ce qui peut être important dans des mises en page complexes où l'espacement est crucial pour la lisibilité et l'esthétique.
• Compatibilité avec les autres propriétés de bordure : border-bottom est souvent utilisée en combinaison avec les autres propriétés de bordure, comme border-top, border-left et border-right. Vous pouvez définir des bordures différentes pour chaque côté d'un élément en utilisant des valeurs spécifiques pour chaque propriété, offrant ainsi un contrôle complet sur la présentation des bordures.
• Effets avec les bordures créatives : En utilisant des styles comme dotted (pointillé) ou dashed (en tirets), vous pouvez obtenir des effets visuels intéressants pour les bordures inférieures. Par exemple, un effet de bordure pointillée peut être utilisé pour indiquer des éléments interactifs ou pour séparer visuellement différentes sections de manière discrète.
• Utilisation dans les formulaires et liens : border-bottom est fréquemment utilisée dans les formulaires et les liens pour ajouter un accent visuel au texte. Par exemple, un lien peut avoir une bordure inférieure fine et solide qui s'active ou se modifie lors du survol (avec :hover), offrant un effet interactif et améliorant l'expérience utilisateur.
• Personnalisation des bordures en fonction du contexte : border-bottom peut être ajustée pour des effets contextuels. Par exemple, une bordure de 1px solide peut être utilisée sur un élément de menu pour séparer les éléments, tandis qu'une bordure épaisse ou en double peut être utilisée pour marquer des éléments importants ou pour des mises en page plus audacieuses.
• Réactivité et bordures dynamiques : Lors de la conception d'interfaces réactives, il peut être nécessaire d'ajuster les propriétés de la bordure inférieure en fonction de la taille de l'écran. Par exemple, une bordure plus fine peut être utilisée sur des écrans mobiles pour économiser de l'espace, tandis qu'une bordure plus épaisse peut être utilisée sur des écrans plus grands pour attirer l'attention sur certains éléments.