CSS border-right-color Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 9 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-right-color property in CSS allows you to specify the color of the right border of an element.

This property is particularly useful when you want to have different border colors on each side of an element. It can be applied to any element that has a border, enabling more control over the design and appearance of your web pages.

💡 Syntax

The syntax for the border-right-color property is straightforward. It can be used with any valid CSS color value.

Syntax

Copied

element {
  border-right-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the border-right-color property is currentcolor, which means it inherits the value of the color property of the element.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
transparent	Specifies that the right border should be transparent.
currentcolor	The current value of the color property.

📄 Example

In this example, we'll set the right border color of a div element to red.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-right-color Example</title>
  <style>
    div {
      border: 2px solid;
      border-right-color: red;
    }
  </style>
</head>
<body>
  <h1>Right Border Color Example</h1>
  <div>
    This div has a red right border.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-right-color property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is a widely used property, and you can confidently use it in your designs.

🎉 Conclusion

The border-right-color property is a simple yet effective way to control the appearance of the right border of an element.

By using this property, you can enhance the visual appeal of your elements and create more dynamic and engaging designs. Whether you want to highlight a particular side of an element or simply match your border colors with your overall design scheme, this property offers the flexibility you need.