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:

• border-width
• border-style
• border-color

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.