CSS border-right-color Property

CSS border-right-color property sets the right border color of an element.


The following table outline the usages and version history of this property.

Default value: The value of the color property
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderRightColor = "#000000"


Here is a syntax for the CSS border-right-color property

border-right-color: color | transparent | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
color Default color black. Specifies the border right color
Value Description
color name Name of the border right color (eg, red, pink, blue)
#xxxxxx Hexadecimal representation of the border right color
rgb(x, x, x) RGB representation of the border right color
rgba(x, x, x, x) RGBA representation of the border right color
hsl(x, x, x) HSL representation of the border right color
hsla(x, x, x, x) HSLA representation of the border right color
transparent Specifies the transparent border right color
initial Sets default value of this property
inherit Inherits this property from its parent element


The example below shows to sets border right color.

.border-1 {
  border-right-color: pink;
.border-2 {
  border-right-color: #888888;
.border-3 {
  border-right-color: rgb(255, 167, 0, 0.9);
.border-4 {
  border-right-color: hsl(45, 70%, 50%, 0.9);

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.