CSS border-right-color Property

CSS border-right-color Property

The border-right-color property in CSS is used to set the color of the right border of an element. If no border-style is defined, the border will not be visible.

1. Syntax

selector {
  border-right-color: color;
}

✅ Must be used with border-style and border-width for the border to appear.

Value Options:

Value	Description
Color Name	red, blue, green, etc.
Hex Code	#ff5733, #000000, etc.
RGB	rgb(255, 0, 0)
RGBA	rgba(255, 0, 0, 0.5) (with transparency)
HSL	hsl(0, 100%, 50%)

2. Example – Setting Right Border Color

div {
  border-right-width: 5px;
  border-right-style: solid;
  border-right-color: blue;
}

✅ This creates a 5px solid blue right border.

3. Example – Using Shorthand border-right

div {
  border-right: 4px dashed red;
}

✅ This is equivalent to:

div {
  border-right-width: 4px;
  border-right-style: dashed;
  border-right-color: red;
}

4. Example – Transparent Border

div {
  border-right: 3px solid transparent;
}

✅ The border exists but is invisible.

5. Example – Different Border Colors for Each Side

div {
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: purple;
  border-style: solid;
  border-width: 5px;
}

✅ Each side has a different color.

6. Removing the Right Border

div {
  border-right: none;
}

✅ Removes the right border.

7. Border-Right-Color vs. Shorthand Border

border-right-color	Shorthand border-right
Only sets color	Sets width, style, and color
border-right-color: red;	border-right: 2px solid red;

✅ Use border-right for cleaner code if all properties are defined.

8. Best Practices

✔ Always define border-right-style for the border to appear.
✔ Use border-right shorthand when setting width, style, and color together.
✔ Use border-right: none; to remove the right border.