border-left

Syntaxe

Paramètres

Description

Cette propriété permet de définir le format de la bordure à la gauche 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 et rôle : La propriété border-left est une propriété raccourcie permettant de définir simultanément la largeur, le style et la couleur de la bordure gauche d'un élément. Elle simplifie la gestion de cette bordure en regroupant plusieurs propriétés (border-left-width, border-left-style, border-left-color) en une seule déclaration.
• Syntaxe compacte : La propriété accepte une combinaison de trois valeurs dans cet ordre : largeur, style et couleur. Par exemple, border-left: 2px solid red; définit une bordure gauche de 2 pixels, avec un style solide et une couleur rouge. Si une ou plusieurs valeurs sont omises, des valeurs par défaut s'appliquent.
• Valeurs par défaut : Si border-left est utilisé sans spécifier certaines propriétés, des valeurs par défaut s'appliquent : la largeur sera medium, le style sera none (pas de bordure visible) et la couleur héritera de color (couleur du texte de l'élément).
• Indépendance des côtés : Contrairement à border (définissant toutes les bordures d'un élément), border-left s'applique uniquement à la bordure gauche. Cela permet un contrôle précis et indépendant des styles pour chaque côté d'un élément, utile pour des designs asymétriques.
• Interaction avec d'autres propriétés : Si border est défini après border-left, les valeurs de border écraseront celles de border-left. Cela peut entraîner des conflits ou des effets non souhaités si l'ordre des déclarations CSS n'est pas bien organisé dans votre feuille de style.
• Utilisation avec des valeurs globales : La propriété border-left peut également accepter des valeurs globales comme inherit, initial et unset. Par exemple, border-left: inherit; force la bordure gauche à hériter les styles de l'élément parent, utile dans des contextes de styles imbriqués.
• Performances et bonnes pratiques : Il est souvent préférable d'utiliser des propriétés raccourcies comme border-left pour optimiser les feuilles de style et réduire la répétition de code. Cependant, pour des modifications précises, les propriétés longues comme border-left-width ou border-left-color restent utiles.
• Compatibilité et cas pratiques : La propriété border-left est compatible avec tous les navigateurs Web modernes et anciens, y compris Internet Explorer. Elle est couramment utilisée dans des designs nécessitant des bordures asymétriques, comme des séparateurs visuels ou des effets décoratifs spécifiques uniquement sur le côté gauche d'un élément.