The CSS 'border-right-color' property specifies the color of an element's right border. It allows for the customization of the right border's color independently of the other borders, enabling designers to create visually distinct or thematic designs on specific sides of an element.
CSS 'border-right-color' Property Examples
See the Pen CSS 'border-right-color' Property Explained by Webzstore (@webzstore) on CodePen.
The 'border-right-color' property provides extensive control over the appearance of an element's right border, supporting the creation of detailed and visually appealing web designs.
Browser Support For 'border-right-color' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-right-color for the full compatibility details, including mobile browsers.
CSS Syntax of the 'border-right-color' Property
border-right-color: color | initial | inherit;
Usage of the 'border-right-color' Property
Use 'border-right-color' to set or change the color of an element's right border. This property is particularly useful for highlighting or differentiating the right side of an element within a layout or for aligning the border color with a design's color scheme.
Property Values of the 'border-right-color' Property
- Color: Defines the color of the right border using any standard CSS color values, such as named colors, HEX codes, RGB(a), and HSL(a).
- Initial: Resets the 'border-right-color' to its default value.
- Inherit: Inherits the 'border-right-color' from the parent element.



