In this section, we will learn what the border-right property is and how to use it in CSS.
CSS border-right Property Definition and Usage
In CSS, you have this ability to style each border of an element individually.
To give you an example, the `border-right` property is a property that specifically focuses on the right border of an element.
The border-right is a shorthand property and allows us to set values for three other properties:
Basically, via the border-right property, we can change the “width”, “style”, and “color” of the right border of an element all in one declaration.
CSS border-right Property Syntax
border-right: border-width border-style border-color|initial|inherit;
CSS border-right Property Value
As the syntax of this property shows, the border-right property takes three values:
- The first value is the one we set for the border-width property.
- The second value is the one we set for the border-style property.
- And the last value is the one we set for the border-color property.
Notes:
- We can use the two global values “initial” and “inherit” here as well.
- If you omit the color value in this property, the color of the border becomes the same as the font color of that element.
Example: border-right property in CSS
See the Pen border-right property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-right Property Work?
In this example, we’ve intentionally left out the color value in the border-right property.
But as you can see, the font color in this element is set to red. Hence, the color of the border becomes red as well.
