CSS border-right-color Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS border-right-color property painting only the physical right border in a chosen color
Definition

Definition and Usage

The border-right-color property sets the color of an element’s physical right border. You can also set it through the shorthands border-right or border-color.

It only paints color. You still need a visible border-right-style and a non-zero border-right-width. The initial value is currentColor. It is not inherited. Unlike border-inline-end-color, it does not flip in RTL layouts.

Baseline for <color>.

Not deprecated. Everyday color values are widely available. The newer stripes() / <image-1D> form from Borders Level 4 is limited — stick to normal colors for study and production.

Syntax

CSS Syntax

syntax.css
border-right-color: <color> | initial | inherit;

One color value. Examples: red, #32a1ce, rgb(170 50 220 / 0.6), currentColor, transparent.

Values

Property Values

ValueDescriptionTry it
Named colorKeywords such as red, blue, or goldTry it
HexA hex color such as #32a1ce or #f00Try it
rgb()Red, green, blue channels, with an optional alphaTry it
hsl()Hue, saturation, and lightness, with an optional alphaTry it
currentColorUses the element’s color. Also the initial valueTry it
transparentFully transparent. The border still takes space if width and style are setTry it
initialSets this property to its default value, currentColorTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use border-right-color

Make the right border visible first, then paint its color.

  1. Give the right edge a width and a style, or use border / border-right.
  2. Set border-right-color to any valid color.
  3. Leave other sides alone, or set a base border and override only the right color.
  4. Use border-inline-end-color when the trailing edge should follow writing direction.
PieceRequired?Role
Visible styleYesWithout solid (or similar), color has nothing to paint
Non-zero widthYesA zero-width border stays invisible
Color valueYesNamed, hex, rgb(), hsl(), currentColor, and more
Physical right onlyBy designDoes not move with writing mode or direction
Try it

Live Preview

Width and style stay fixed. Only border-right-color changes.

The right edge is 4px solid. Text color is dark slate, so currentColor matches the text.

Box

border-right-color: red

Code

CSS Examples

Each snippet focuses on border-right-color. Width and style are only there so the color can show. Use Try It Yourself for a live editor.

Example 1 — Named Color on the Right

A shared border on all sides, then a red right edge.

CSS
<style>
  div {
    border: 2px solid;
    border-right-color: red;
    padding: 10px;
  }
</style>

<div>Red right</div>
Try It Yourself

How It Works

  1. Draw a border. border: 2px solid gives every side width and style. Color defaults to currentColor.
  2. Override one side. border-right-color: red paints only the right edge.
  3. Leave the rest. Top, bottom, and left keep the text color.
  4. Read the contrast. The red edge is the lesson; the other sides show the difference.

Example 2 — Hex Color

Use a hex value when you need an exact brand or UI color.

CSS
<style>
  div {
    border-right: 4px solid;
    border-right-color: #32a1ce;
    padding: 10px;
  }
</style>

<div>Hex right</div>
Try It Yourself

How It Works

  1. Make the edge visible. border-right: 4px solid sets width and style on the right only.
  2. Set the hex color. #32a1ce is a teal blue for that edge.
  3. Longhand after shorthand. Writing color after border-right keeps the override clear for study.
  4. Same as one shorthand. You could also write border-right: 4px solid #32a1ce.

Example 3 — currentColor

Match the right border to the text color automatically.

CSS
<style>
  div {
    color: #7c3aed;
    border-right: 4px solid;
    border-right-color: currentColor;
    padding: 10px;
  }
</style>

<div>Matches text</div>
Try It Yourself

How It Works

  1. Set the text color. color: #7c3aed turns the words purple.
  2. Show a right border. border-right: 4px solid draws the edge.
  3. Link color to text. currentColor copies the computed color value.
  4. Change once, update both. Edit color and the border follows. This is also the property’s initial value.

Edge Cases & Pitfalls

If the right color does not show, one of these is usually why.

style

Color alone draws nothing

border-right-color: red with style none stays invisible. Set border-right-style or use a shorthand that includes a style.

order

A later shorthand can wipe the color

border-right: 4px solid after your color sets color back to currentColor. Put border-right-color after the shorthand, or include the color in the shorthand.

RTL

Physical right does not flip in RTL

The color stays on the right even with direction: rtl. Use border-inline-end-color for a logical trailing edge.

alpha

transparent still occupies space

A transparent right border keeps its width in the box model. To remove the edge, set style to none or width to 0.

sides

One longhand, one side

For every side at once, use border-color. For the left edge only, use border-left-color.

Compatibility

Browser Support

border-right-color is a browser CSS property for the box model. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

border-right-color

Supported in all modern browsers and Internet Explorer for normalvalues. The newer stripes() image form is not part of these numbers.

100% Color values
Google Chrome All versions
Full support
Mozilla Firefox All versions
Full support
Apple Safari All versions
Full support
Microsoft Edge All versions
Full support
Opera All versions
Full support
Samsung Internet All versions
Full support
Internet Explorer All versions
Full support
border-right-color Widely supported

Bottom line: Safe everywhere for named colors, hex, rgb, hsl, currentColor, and transparent. Prefer those over Level 4 stripe colors. It is not a runtime API.

Remember

Key Takeaways

  • Role: paint the physical right border. Width and style come from other properties.
  • Initial value: currentColor. Not inherited.
  • Needs a line: style and width must be visible or the color never shows.
  • Physical: always the right side. Use border-inline-end-color for logical trailing edges.

One line: border-right-color paints the right edge — after that edge already has a visible width and style.

Frequently Asked Questions

It sets the color of the physical right border only. Width and style come from other properties or from a shorthand such as border-right.
The initial value is currentColor, so the right border uses the element's text color until you set something else.
Color alone is not enough. You also need a visible border-right-style (such as solid) and a non-zero width, or a shorthand that sets those for you.
border-right-color always paints the physical right side. border-inline-end-color follows writing direction, so it can move to the left in RTL layouts.
Yes. Any valid <color> works: named colors, hex, rgb(), hsl(), currentColor, transparent, and more.
It is Baseline and widely available in all modern browsers and Internet Explorer. It is a browser CSS property, not a Node.js feature.

Next: border-right-style

Learn the line styles that make a right border visible.

border-right-style tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS border-right Property CSS border-right-style Property