CSS border-right-color: Set or Change the Color of the Right Border

The CSS border-right-color property is used when we need to change the color of the right border of an element. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 6px solid darkgray; padding: 10px; border-right-color: crimson;}
   </style>
</head>
<body>

   <p>This is a para.</p>
   
</body>
</html>
Output

This is a para.

In the above example, the following CSS code:

p {border: 6px solid darkgray; padding: 10px; border-right-color: crimson;}

applies multiple styles to all "p" elements in the HTML document.

The first style, border, adds a 6-pixel border around the p element and changes its color to darkgray. The border is solid, implying that it is a continuous line.

The second style, padding, adds 10 pixels of space on all sides of the element's border. This increases the distance between the element's content and the border itself.

The third style, border-right-color, changes the color of the right border of the p element to crimson, which is a deep red color.

When applied to the given HTML code, the result would be a p element with a 6-pixel wide border around it in darkgray, with a 10-pixel gap between the border and the text inside the element. The right border of the element is colored crimson.

The border-right-color property is a part of the border shorthand property in CSS. It allows you to set the color of the right border of an element independently of the other borders. This can be useful for creating visual interest and emphasis, by adding a different color or style to one particular border of an element.

However, it's important to use this property judiciously and make sure that the color or style you choose for the border is appropriate for the overall design and purpose of the element.

CSS border-right-color syntax

The syntax of the border-right-color property in CSS is:

border-right-color: x;

The value of x should be any of the following:

Advantages of the border-right-color property in CSS

Disadvantages of the border-right-color property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!