CSS border-right-color Property

This property sets the color of an element's right border. It allows you to style the right edge independently from the top, bottom, and left sides.

selector { border-right-color: value; }
<color> Defines the color using keywords, hex, RGB, RGBA, HSL, or HSLA values.
transparent Makes the right border invisible while maintaining its width.
currentcolor Sets the border color to match the value of the element's color property.
inherit Forces the element to take the right border color of its parent element.
initial Sets the property to its default value which is currentcolor.
revert Resets the property to the default value established by the browser stylesheet.

Code Examples

A basic example showing how to apply a solid orange color to the right border of a div.

<div style="border-right-width: 10px; border-right-style: solid; border-right-color: #ff9900; padding: 20px;">
  This box has a thick orange right border.
</div>

An advanced example using a CSS transition and JavaScript to dynamically change the right border color based on a user action.

<style>
  .status-card {
    padding: 15px;
    background: #f4f4f4;
    border-right: 8px solid #333333;
    transition: border-color 0.3s ease;
  }
</style>

<div id="myCard" class="status-card">
  System Status: Pending
</div>
<button onclick="completeTask()">Complete Task</button>

<script>
function completeTask() {
  const card = document.getElementById("myCard");
  card.style.borderRightColor = "#00cc00";
  card.innerHTML = "System Status: Complete";
}
</script>

Pro Tip

If you want to create a highlight effect on hover without the element jumping around, set a transparent border-right-color first. Then, on hover, change that color to something visible. This keeps the layout stable because the border width is already calculated and taking up space even when it is transparent.

Deep Dive

Think of your element as a picture frame where you can paint each side a different color. The border-right-color property specifically targets that right edge. By default, it looks at the text color of the element (currentcolor) and uses that. However, the most important thing to remember is that the color is invisible unless you also define a border-right-style. It is like buying a bucket of paint; the paint exists, but if you do not have a wall (the style) to put it on, you will not see anything. This property is often used as a constituent of the border-right shorthand property, which combines width, style, and color into one line of code.

Best Practices

Use this property when you only want to change the color of the right side without affecting the other three sides. This is great for vertical separators or visual accents on sidebars. To keep your CSS clean, if you are setting all four sides to the same color, just use the border-color shorthand. Always ensure your color contrast is high enough so your users can actually see the border against the background of the page.

Common Pitfalls

The number one mistake is forgetting to set a border-right-style. If the style is set to none or hidden, which is the default for most elements, your color will not show up no matter what you do. Another thing to watch out for is the CSS cascade; if you define a shorthand border property after your specific border-right-color, the shorthand will override your specific color.

Accessibility

Do not rely on the color of a border alone to communicate information, like indicating an error or a success state. Colorblind users might not be able to tell the difference between a red border and a green one. Always include text or an icon to help clarify what the color change is supposed to mean.

Dev Data Table: border-right-color property

default currentcolor
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1998
js_syntax_1 element.style.borderRightColor = "#ff0000";
js_syntax_2 element.style.setProperty("border-right-color", "#ff0000");
js_note In JavaScript, use camelCase for the property name when accessing it via the style object.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }
results render here...