The border-right-color property defines the color of the right border of an element.
The right border color, combined with top, right, and bottom border colors, can also be defined with the border-color shorthand property.
If you use the border-right-color property, you should first set the border-style or border-right-style properties and then change the color of the defined style.
The default width of a border is medium. You can specify the width using either the border-width or border-right-width properties.
Initial Value | currentColor |
Applies to | All elements. It also applies to ::first-letter. |
Inherited | No |
Animatable | Yes. The color of the left border is animatable. |
Version | CSS1 |
DOM Syntax | object.style.borderRightColor = "black"; |
Syntax
border-right-color: color | transparent | initial | inherit;
Example of the border-right-color property:
<!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>
Example of the border-right-color property with the "transparent" value :
<!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>
You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the border-right-color property.
Result
![CSS border-right-color Property](/uploads/media/default/0001/03/5ab18c141db44ddaddc12c04def22ec8e65824ee.png)
Example of the border-right-color property with a named color:
<!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>
Example of the border-right-color property with a hexadecimal value:
<!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>
Example of the border-right-color property with a RGB value:
<!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>
Example of the border-right-color property with a HSL value:
<!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>
Values
Value | Description | Play it |
---|---|---|
color | Defines the color of the right border. Default color is the color of the current element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Required value. | Play it » |
transparent | Applies a transparent color to the right border. The right border will still take up the space defined by the border-width value. | Play it » |
initial | Sets the property to its default value. | Play it » |
inherit | Inherits the property from its parent element. |
Browser support
|
|
|
|
---|---|---|---|
1.0+ | 1.0+ | 1.0+ | 3.5+ |
Practice Your Knowledge
What does the CSS property 'border-right-color' do?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.