CSS border-right Property

CSS border-right Property

The border-right property in CSS is a shorthand property used to set the width, style, and color of an element's right border in one line.

1. Syntax

selector {
  border-right: width style color;
}

✅ Each value is optional, but the style must be defined for the border to appear.

Shorthand Values:

Value	Description	Example
width	Specifies the thickness of the right border	2px, thin, thick, 10px
style	Defines the border appearance	solid, dashed, double, none
color	Specifies the border color	red, #00ff00, rgba(0,0,255,0.5)

2. Example – Setting a Solid Right Border

div {
  border-right: 5px solid blue;
}

✅ The right border will be 5px thick, solid, and blue.

3. Example – Using Different Styles

.box1 { border-right: 4px dotted red; }
.box2 { border-right: 6px dashed green; }
.box3 { border-right: 8px double blue; }
.box4 { border-right: 5px groove purple; }
.box5 { border-right: 5px inset gray; }

✅ Each box has a different right border style.

4. Example – Using Individual Properties

Instead of shorthand, you can use separate properties:

div {
  border-right-width: 5px;
  border-right-style: solid;
  border-right-color: red;
}

✅ This achieves the same effect as border-right: 5px solid red;.

5. Example – Removing the Right Border

div {
  border-right: none;
}

✅ The right border is removed.

6. Border-Right vs. Full Border

Shorthand border-right	Shorthand border
Only affects the right border	Affects all sides
border-right: 3px solid red;	border: 3px solid red;

✅ Use border-right when you only need a right border, and border when you need all sides.

7. Best Practices

✔ Always specify border-right-style, or the border won’t appear.
✔ Use shorthand border-right instead of separate properties for cleaner code.
✔ Set border-right: none; to remove the right border instead of 0px.