CSS border-right-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-right-color property sets the color used when the right edge of an element’s border is rendered. It only affects that single side and does not directly change thickness, style, or how the border is positioned - it simply determines the paint used for the right border when the border is actually drawn. Visually, this is the color you see along the element’s right perimeter where the border exists.

How that color appears depends on whether the border on that side is being rendered at all and how other border properties are configured. The right-edge color interacts with the element’s border rendering rules controlled by border-style and its thickness from border-width; if the computed border style for the right edge results in no visible edge, the color has no effect. Authors often use the shorthand border-right or the grouped border-color to set this property alongside related attributes in a single declaration, and those shorthands participate in the cascade and override rules in the same way as the longhand property.

In the cascade and computed-value process, border-right-color follows normal CSS precedence (origin, specificity, source order) and is not an inherited property; a descendant will not automatically take its ancestor’s right border color unless explicitly specified. When the color includes partial transparency, the final rendered appearance depends on compositing with backgrounds and neighboring elements, and joins at corners with adjacent borders are resolved according to the border rendering model so you may see blending or seams at corners.

For internationalized layouts and writing-mode–sensitive designs, consider the logical equivalent that maps to the physical right side in different writing directions: border-inline-end-color. Using logical properties can make color application more robust across horizontal and vertical text flows, but under the hood the browser still computes a concrete color for the physical right edge when painting the element.

Definition

Initial value: currentColor
Applies to: All elements
Inherited: No
Computed value: The computed color
Animatable: Yes
JavaScript syntax: object.style.borderRightColor

Interactive Demo

border-right-color: blue;

border-right-color: #ADB946;

border-right-color: rgb(25, 201, 33);

border-right-color: rgba(123, 45, 87, .5);

border-right-color: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-right-color: <color>

Values

<color>The computed value of the 'color' property. This value can be a basic color keyword, such as red or green, a numerical value, an RGB or RGBA value, or an HSL or HSLA value.
transparentFully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
inherit

Example

HTML

<body>

  <h1>border-right-color example</h1>



  <div class="box default">Default border-right-color</div>



  <div class="box custom">Custom border-right-color</div>



  <div class="box transparent">Transparent border-right-color</div>

</body>

CSS

/* Page styles */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f7f7f7;
}

/* Base box styles */
.box {
  width: 320px;
  padding: 16px;
  margin: 12px 0;
  border: 4px solid #444; /* border shorthand sets color for all sides */
  background: #fff;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Default: right border uses the same color as other sides */
.box.default {
  /* inherits border-right-color from the shorthand above (#444) */
}

/* Custom: override only the right border color */
.box.custom {
  border-right-color: #2ecc71; /* green right border */
}

/* Transparent: make only the right border invisible */
.box.transparent {
  border-right-color: transparent;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-right-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.