Propriété CSS border-right-color

La propriété border-right-color définit la couleur de la bordure droite d'un élément.

La couleur de la bordure droite, combiné avec les couleurs des bordures supérieure, gauche et inférieure, peuvent aussi être définies avec la propriété raccourcie border-color .

Si vous utilisez la propriété border-right-color , vous devez premièrement définir les propriétés border-style ou border-right-style et ensuite changer la couleur du style défini.

La largeur initiale de la bordure est moyenne. Vous pouvez spécifier la largeur en utilisant les propriétés border-width ou border-right-width properties.

Valeur initiale currentColor
Appliquée à Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée Non
Animable Oui. La couleur de la bordure droite est animable.
Version CSS1
Syntaxe DOM object.style.borderRightColor = "black";

Syntax

border-right-color: color | transparent | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 300px;
      padding: 20px;
      border-style: solid;
      border-color: #ccc;
      border-right-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-right-color</h2>
    <div>Exemple pour la propriété border-right-color avec la couleur différente de la bordure droite.</div>
  </body>
</html>

Considérons un autre exemple, où la valeur est définie transparent pour la bordure droite.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2 {
      padding: 3px; 
      text-align: center;   
      border: 15px groove #1c87c9;
      border-right-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure droite transparent.</h2>
  </body>
</html>
Vous pouvez définir la valeur hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs pour la propriété border-right-color.

Voyons un exemple de la propriété CSS border-right-color où la valeur est un nom de couleur:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 3px;
      border-right-style: solid; 
      border-right-color: black;
      }
    </style>
  </head>
  <body>
    <div>La propriété border-right-color avec la valeur qui est une couleur nommée.</div>
  </body>
</html>

Voyons un exemple, où la propriété border-right-color a la valeur hexadecimal:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 3px;
      border-right-style: solid; 
      border-right-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>La propriété border-right-color avec une valeur hexadecimal.</div>
  </body>
</html>

Voyons un exemple avec border-right-color en utilisant une valeur RGB:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 3px;
      border-right-style: solid; 
      border-right-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Propriété border-right-color avec une valeur RGB.</div>
  </body>
</html>

Voyons un exemple avec border-right-color en utilisant une valeur HSL:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 3px;
      border-right-style: solid; 
      border-right-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <div>Propriété border-right-color avec une valeur HSL.</div>
  </body>
</html>

Valeurs

Valeur Description
color Définit la couleur de la bordure droite. La couleur par défaut est la couleur de l'élément actuel. On peut utiliser les noms des couleurs, les codes des couleurs hexadecimaux, rgb(), rgba(), hsl(), hsla() Valeur requise.
transparent Applique une couleur transparent à une bordure droite. La bordure droite occupera l'espace définie par la valeur border-width .
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

1+ 1+ 1+ 3.5+


Trouvez-vous cela utile?

Articles Associées