Introduction

The border-right-color property in CSS is used to set the color of an element’s right border. It helps you customize the appearance of your web pages by changing the color of the right side of an element’s border. This property can be set individually or as part of the border-color or border-right shorthand properties.

Specification

The border-right-color property is defined in the CSS Backgrounds and Borders Module Level 3. This ensures consistent behavior across different browsers and platforms. For detailed information, refer to the official CSS Backgrounds and Borders Module Level 3 documentation.

Syntax

The border-right-color property is easy to use. Here’s how you can set it:

/* Using named color */
border-right-color: red;

/* Using hexadecimal color */
border-right-color: #ffbb00;

/* Using RGB color */
border-right-color: rgb(255, 0, 0);

/* Using HSL color */
border-right-color: hsl(100deg, 50%, 25% / 75%);

/* Using the current text color */
border-right-color: currentcolor;

/* Making the border transparent */
border-right-color: transparent;

/* Global values */
border-right-color: inherit;
border-right-color: initial;
border-right-color: revert;
border-right-color: revert-layer;
border-right-color: unset;

Values

The border-right-color property accepts several types of values to define the color of the right border:

• Color Values:
  • Named Colors: Like red, blue, etc.
  • Hexadecimal Colors: Like #ffbb00.
  • RGB Colors: Like rgb(255, 0, 0).
  • HSL Colors: Like hsl(100deg, 50%, 25% / 75%).
  • Current Color: currentcolor uses the current text color.
  • Transparent: Makes the border color transparent.
• Global Values:
  • Inherit: Inherits the value from the parent element.
  • Initial: Sets the value to its default value.
  • Revert: Resets the property to its default value as defined by the user-agent stylesheet.
  • Revert-layer: Resets the property to its default value considering the cascade layer.
  • Unset: Resets the property to its inherited value if it inherits from its parent, otherwise to its initial value.

Formal Definition

• Initial Value: currentcolor (uses the current text color).
• Applies To: All elements, including the ::first-letter pseudo-element.
• Inherited: No.
• Computed Value: A color based on the specified value.
• Animation Type: Can be animated as a color.

Examples

A Simple Div with a Border

HTML

<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>

CSS

.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}

Using Different Color Values

HTML

<div class="example1">
  <p>This box has a right border color specified using a named color.</p>
</div>

<div class="example2">
  <p>This box has a right border color specified using a hexadecimal value.</p>
</div>

<div class="example3">
  <p>This box has a right border color specified using an RGB value.</p>
</div>

CSS

.example1 {
  border: solid 0.3em;
  border-right-color: blue;
}

.example2 {
  border: solid 0.3em;
  border-right-color: #ff00ff;
}

.example3 {
  border: solid 0.3em;
  border-right-color: rgb(0, 255, 0);
}

Using Transparent and Inherited Values

HTML

<div class="example4">
  <p>This box has a transparent right border.</p>
</div>

<div class="example5">
  <p>This box inherits its right border color from its parent.</p>
</div>

CSS

.example4 {
  border: solid 0.3em;
  border-right-color: transparent;
}

.example5 {
  border: solid 0.3em;
  border-right-color: inherit;
  color: green; /* Parent color */
}

Browser Compatibility

The border-right-color property is widely supported across various web browsers:

• Google Chrome: Supported from version 1.0.
• Microsoft Edge: Supported from version 12.0.
• Internet Explorer: Supported from version 4.0.
• Firefox: Supported from version 1.0.
• Opera: Supported from version 3.5.
• Safari: Supported from version 1.0.

For the most accurate and up-to-date information, refer to the Browser Compatibility Data (BCD) tables on MDN Web Docs.

See Also

For further exploration of related CSS properties, check out these resources:

• Border-related CSS Shorthand Properties:
  • border
  • border-right
  • border-color
• Color-related CSS Properties for Other Borders:
  • border-left-color
  • border-bottom-color
  • border-top-color
• Other Border-related CSS Properties:
  • border-right-style
  • border-right-width
• Default Color Value:
  • currentcolor

These resources provide additional insights and tools for customizing borders and colors in web design and development.

Frequently Asked Questions (FAQs)

What is the border-right-color property in CSS?

The border-right-color property sets the color of an element’s right border. It allows you to customize the color of the right edge independently from other sides.

How can I set a gradient as the right border color?

The border-right-color property only supports solid colors. However, you can simulate a gradient using a pseudo-element positioned along the right side.

Can I apply border-right-color with transparency?

Yes, you can use transparent or semi-transparent colors using RGBA or HSLA values. For example, border-right-color: rgba(0, 0, 255, 0.5); applies a semi-transparent blue border.

What is the default value for border-right-color?

The default value is the current color of the element, typically inherited from the text color unless overridden. If you don’t specify a color, it uses this inherited value.

How can I achieve contrasting colors for different border sides?

You can apply different colors to each side using border-top-color, border-right-color, border-bottom-color, and border-left-color individually. This approach is useful for creating visually striking or accentuated designs.