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>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+ |
Pratiquez vos connaissances
