border-right

Syntaxe

Paramètres

Description

Cette propriété permet de définir le format de la bordure à la droite 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



• Propriété raccourcie : La propriété border-right est une propriété raccourcie permettant de définir simultanément le style, la largeur et la couleur de la bordure droite d'un élément. Par exemple, border-right: 2px solid blue; applique une bordure bleue, pleine et d'une largeur de 2 pixels.
• Valeur par défaut : Si une valeur n'est pas spécifiée pour l'une des composantes (style, largeur ou couleur), celle-ci prendra sa valeur par défaut. Par exemple, si seul le style est défini (border-right: solid;), la largeur sera par défaut medium et la couleur sera héritée ou dépendra de la couleur du texte (color).
• Importance du style : Une bordure droite ne sera visible que si un style est défini via border-right-style. Si cette valeur est none (par défaut), même si la largeur et la couleur sont spécifiées, la bordure ne s'affichera pas.
• Compatibilité avec les autres propriétés de bordure : border-right peut coexister avec les autres propriétés raccourcies comme border, border-width, ou border-color. Toutefois, si plusieurs propriétés sont déclarées pour la bordure droite, l'ordre d'application déterminera la valeur finale utilisée.
• Utilisation asymétrique : La propriété border-right est idéale pour créer des designs asymétriques où seule la bordure droite est visible ou différente des autres côtés. Par exemple, dans une mise en page en colonnes, une bordure droite peut être utilisée pour séparer visuellement les colonnes.
• Interaction avec des valeurs dynamiques : La largeur de la bordure droite (border-right-width) peut être définie en unités dynamiques comme %, em, ou rem, ce qui permet une mise en page fluide et réactive. Cela est utile pour ajuster les bordures en fonction de la taille du texte ou des dimensions de l'élément parent.
• Animation possible : La propriété border-right peut être animée en CSS à l'aide des transitions. Par exemple, la largeur, la couleur ou même le style de la bordure peuvent changer progressivement lorsque l'utilisateur interagit avec un élément, comme lors d'un survol (hover).
• Compatibilité des navigateurs : La propriété border-right est entièrement prise en charge par tous les navigateurs modernes et anciens, y compris Internet Explorer. Cela garantit qu'elle peut être utilisée sans craindre des problèmes de compatibilité dans des projets multi-navigateurs Web.