CSS Reference Property


The border-right-color property is used to set the color of the right border of an element.

Official Syntax

  • Syntax:

    border-right-color: <color>
  • Initial: currentColor
  • Applies To: all elements
  • Animatable: yes, as a <color>


See the <color> property entry for a list of possible values.


The border-right-color property can also inherit the value of the element’s parent’s right border color using the keyword inherit.


The following are all valid border-right-color values set on an element. The element’s border style and border width are also set using the border-right-style and border-right-width respectively.

.element {
    border-right-style: dotted;
    border-right-width: 10px;

    border-right-color: red;
    /* or */
    border-right-color: #44aacf;
    /* or */
    border-right-color: rgba(255,0,10,.5);

Live Demo

Have a look at the live demo

View this demo on the Codrops Playground

Browser Support

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Written by . Last updated February 4, 2015 at 2:46 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.