Tag border-right-color

🎨 CSS border-right-color: Coloring the Right Edge of Elements

In modern web design, borders do more than just frame content — they add structure, emphasis, and style. The border-right-color property allows you to specify a unique color for the right border of an element, independent from the other sides.

🧾 What is border-right-color?

The border-right-color CSS property sets the color of the right border of an element. It gives you fine control over each side of the border — especially when used alongside border-right-style and border-right-width.

🧬 Syntax

selector {
  border-right-color: <color>;
}

Acceptable values:

  • Color names: red, blue, green
  • Hex codes: #ff6600, #000
  • RGB/RGBA: rgb(0, 128, 255), rgba(255, 0, 0, 0.3)
  • HSL/HSLA: hsl(200, 100%, 50%)
  • transparent: makes the right border invisible (still takes up space)
  • inherit: inherits the value from its parent
  • initial: resets to default

🎯 Examples

1. Basic right border color

div {
  border-right-width: 3px;
  border-right-style: solid;
  border-right-color: teal;
}

A solid teal right border appears 3px wide.

2. Transparent right border

.box {
  border-right: 4px solid transparent;
}

Useful for maintaining layout spacing without showing the border.

3. Different colors on each border side

.card {
  border-style: solid;
  border-width: 2px;
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: orange;
}

Each side of the element gets its own unique color.

🔍 How It Works

  • The color won’t be visible unless the border-right-style is set to something other than none.
  • If not specified, it inherits from the color property of the element.
  • Can be used alone or as part of the shorthand border-right.

🛠️ Best Practices

  • Always pair with border-right-style to ensure visibility.
  • Use consistent border colors for clean, modern designs — or different ones for creative UIs.
  • Use transparent for layout tricks where spacing is needed but visual borders are not.
  • Combine with :hover, :focus, or animations for interactive UI effects.

✅ Browser Support

✅ Fully supported across all modern browsers, including:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 8+

🔚 Conclusion

The border-right-color property provides fine-grained control over the appearance of the right border. Whether you’re emphasizing a layout section, customizing a card, or building a complex interface, this property helps you bring visual clarity to your designs.