Propriété CSS border-right-color
La propriété border-right-color définit la couleur de la bordure droite d'un élément. Découvrez toutes les valeurs avec des exemples.
La propriété CSS border-right-color définit la couleur de la bordure droite d'un élément. Elle vous permet de styliser le bord droit indépendamment des trois autres côtés, ce qui est utile pour les séparateurs, les encadrés et les designs de boîte asymétriques.
Une bordure se compose de trois éléments — largeur, style et couleur — et les trois doivent être présents pour que la bordure s'affiche. Une couleur seule ne peint rien, car une bordure sans style a la valeur par défaut none. Ainsi, chaque fois que vous définissez border-right-color, assurez-vous qu'un style est également défini via border-style ou border-right-style. La largeur par défaut est medium ; ajustez-la avec border-width ou border-right-width.
Si vous souhaitez définir tous les côtés à la fois, utilisez plutôt le raccourci border-color, qui accepte jusqu'à quatre valeurs pour les bords supérieur, droit, inférieur et gauche.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Hérité | Non |
| Animable | Oui. La couleur de la bordure droite est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderRightColor = "black"; |
Syntaxe
border-right-color: color | transparent | initial | inherit;La valeur est une seule <color>, ou l'un des mots-clés universels CSS. Notez que contrairement au raccourci border-color, cette propriété n'accepte jamais plus d'une valeur — elle n'affecte que le côté droit.
Exemple de la propriété border-right-color
Dans l'exemple ci-dessous, une bordure grise uniforme est appliquée à une boîte, puis seul le bord droit est recoloré en bleu :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #ccc;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-right-color example</h2>
<div>Example for the border-right-color property with different right border color.</div>
</body>
</html>Exemple avec la valeur "transparent"
Le mot-clé transparent masque la couleur de la bordure droite tout en conservant l'espace qu'elle occupe. Cela est pratique pour créer des flèches et des triangles, ou pour éviter que les mises en page ne se décalent lorsqu'une bordure est activée ou désactivée :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px groove #1c87c9;
border-right-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent right border</h2>
</body>
</html>Vous pouvez utiliser des valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou des noms de couleurs pour la propriété border-right-color.
Résultat
Les quatre formats de valeur ci-dessous produisent tous le même effet — ils diffèrent uniquement dans la manière dont la couleur est écrite.
Exemple avec une couleur nommée
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: black;
}
</style>
</head>
<body>
<div>Border-right-color property with a named color value.</div>
</body>
</html>Exemple avec une valeur hexadécimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-right-color property with a hexadecimal value.</div>
</body>
</html>Exemple avec une valeur RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-right-color property with a RGB value.</div>
</body>
</html>Exemple avec une valeur HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-right-color property with a HSL value.</div>
</body>
</html>Si vous omettez border-right-style (ou border-style), la couleur n'a aucun effet visible — une bordure sans style prend la valeur par défaut none et ne s'affiche pas du tout.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| color | Définit la couleur de la bordure droite. La couleur par défaut est la couleur de l'élément actuel. Les noms de couleurs, codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Valeur obligatoire. | Essayer » |
| transparent | Applique une couleur transparente à la bordure droite. La bordure droite occupera toujours l'espace défini par la valeur border-width. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |