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ée aux couleurs des bordures supérieure, droite et inférieure, peut également être définie avec la propriété raccourcie border-color.
Si vous utilisez la propriété border-right-color, vous devez d’abord définir les propriétés border-style ou border-right-style, puis modifier la couleur du style défini.
La largeur par défaut d’une bordure est medium. Vous pouvez spécifier la largeur à l’aide des propriétés border-width ou border-right-width.
| Initial Value | currentColor |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No |
| Animatable | Yes. The color of the right border is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.borderRightColor = "black"; |
Syntaxe
Syntaxe de la propriété CSS border-right-color
border-right-color: color | transparent | initial | inherit;Exemple de la propriété border-right-color :
Exemple de la propriété CSS border-right-color
<!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 de la propriété border-right-color avec la valeur "transparent" :
Exemple de la propriété CSS border-right-color avec la valeur transparente
<!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>INFO
Vous pouvez définir des valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou des noms de couleurs comme valeur de la propriété border-right-color.
Résultat
Exemple de la propriété border-right-color avec une couleur nommée :
Exemple de la propriété CSS border-right-color avec une valeur de 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 de la propriété border-right-color avec une valeur hexadécimale :
Exemple de la propriété CSS border-right-color 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 de la propriété border-right-color avec une valeur RGB :
Exemple de la propriété CSS border-right-color 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 de la propriété border-right-color avec une valeur HSL :
Exemple de la propriété CSS border-right-color 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>Valeurs
| Value | Description | Play it |
|---|---|---|
| color | Définit la couleur de la bordure droite. La couleur par défaut est celle de l’élément actuel. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Valeur requise. | Play it » |
| transparent | Applique une couleur transparente à la bordure droite. La bordure droite occupera toujours l’espace défini par la valeur border-width. | Play it » |
| initial | Définit la propriété sur sa valeur par défaut. | Play it » |
| inherit | Hérite de la propriété de son élément parent. |
Practice
What does the CSS property 'border-right-color' do?