Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of border-right-color property in CSS
The border-right-color property sets the color of an element's right border. It works independently of other border properties and allows you to customize just the right border color while leaving other borders unchanged.
Syntax
border-right-color: color | transparent | inherit;
Values
- color - Any valid CSS color (hex, RGB, HSL, color names)
- transparent - Makes the border transparent
- inherit - Inherits the color from parent element
Example: Basic Usage
<html>
<head>
<style>
.demo {
border: 3px solid black;
border-right-color: #FF0000;
padding: 15px;
margin: 10px 0;
}
.example2 {
border: 2px solid gray;
border-right-color: blue;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="demo">
This paragraph has a red right border.
</p>
<p class="example2">
This paragraph has a blue right border.
</p>
</body>
</html>
Example: Different Color Formats
<html>
<head>
<style>
.hex-color {
border: 3px solid;
border-right-color: #00FF00;
padding: 10px;
margin: 5px 0;
}
.rgb-color {
border: 3px solid;
border-right-color: rgb(255, 0, 255);
padding: 10px;
margin: 5px 0;
}
.named-color {
border: 3px solid;
border-right-color: orange;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="hex-color">Hex color: #00FF00 (green)</div>
<div class="rgb-color">RGB color: rgb(255, 0, 255) (magenta)</div>
<div class="named-color">Named color: orange</div>
</body>
</html>
Key Points
- Only affects the right border color, other borders remain unchanged
- Requires a border style (solid, dashed, dotted, etc.) to be visible
- Can be used with any valid CSS color format
- Useful for creating asymmetric border designs
Browser Compatibility
The border-right-color property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 4+.
Conclusion
The border-right-color property provides precise control over right border styling. Use it when you need different colored borders on different sides of an element for enhanced visual design.
Updated on: 2026-03-15T23:18:59+05:30
68 Views
Advertisements