CSS border-right-color property
CSS border-right-color property is used to specify the right border color for HTML Element(s).
The syntax to specify a value for border-right-color property is
border-right-color: value;
The following table gives the possible values that could be given to border-right-color property.
Value | Description | Example |
---|---|---|
color | Any valid CSS color value. | border-right-color: red;border-right-color: #f00;border-right-color: #ff000088;border-right-color: rgb(25, 220, 85); |
transparent | Sets left border color to transparent. | border-right-color: transparent; |
initial | Sets left border color to default value. | border-right-color: initial; |
inherit | Inherits left border color value from its parent element. | border-right-color: inherit; |
Note: Please note that there must be a style specified for border or right border, to apply this color.
Examples
In the following examples, we apply a color for left border using different types of allowed values for border-right-color property.
HEX Value for border-right-color
In the following example, we set border-right-color for <h1> elements with hex value of #ab22ff
.
index.html
RGB Value for border-right-color
In the following example, we set border-right-color for <h1> elements with RGB color value of rgb(224, 143, 242)
.
index.html
RGBA Value for border-right-color
In the following example, we set border-right-color for <h1> elements with RGBA color value of rgb(224, 143, 242, 0.5)
.
index.html
HSL Value for border-right-color
In the following example, we set border-right-color for <h1> elements with HSL color value of hsl(98, 49%, 74%)
.
index.html
HSLA Value for border-right-color
In the following example, we set border-right-color for <h1> elements with HSLA color value of hsl(98, 49%, 74%, 0.5)
.
index.html
border-right-color: transparent;
In the following example, we set border-right-color for <h1> elements with value of transparent
.
index.html
Conclusion
In this CSS Tutorial, we learned about border-right property, and how to use this property for HTML Elements, with examples.