The border-right-color property sets the color of the right border.
Color values can be hex, rgb, hsl, rgba, hsla, or a color name.
A border-right-style value is required for a border to show.
An element with a colored right border.
<style>
.border-right-color {
padding: 10px;
width: 300px;
border-right-style: solid;
border-right-color: #302ea3;
}
</style>
<div class="border-right-color">
indigo colored right border
</div>
border-right-color: color | transparent | initial | inherit;
| Value | Description |
|---|---|
| color | right border color. Accepts colorname, hex, rgb, rgba, hsl, hsla values. |
| transparent | Sets right border color to transparent |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different border-right-color values.
<style>
.border-right-example {
padding: 10px;
width: 380px;
border-right-style: solid;
border-right-color: #302ea3;
}
</style>
<div class="border-right-example">
border-right-color: #302ea3
</div>
This table shows when border-right-color support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
