CSS border-right-width Property

CSS border-right-width Property

The border-right-width property in CSS specifies the thickness (width) of the right border of an element. It is used along with border-right-style and border-right-color to fully define the right border.

1. Syntax

selector {
  border-right-width: value;
}

Value Options:

• thin – Sets a thin right border.

• medium – Sets a medium-sized right border (default).

• thick – Sets a thick right border.

• length – Specifies a custom width using units like px, em, %, rem, etc.

• inherit – Inherits the value from the parent element.

2. Example – Setting border-right-width in Pixels

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

<div>
  This div has a solid blue right border with a width of 5px.
</div>

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

3. Example – Using Keywords (thin, medium, thick)

div {
  border-right-width: thick;
  border-right-style: dashed;
  border-right-color: red;
}

✅ The right border will be thick, dashed, and red.

4. Example – Using inherit to Copy the Parent's Right Border Width

.parent {
  border-right-width: 8px;
  border-right-style: solid;
  border-right-color: green;
}

.child {
  border-right-width: inherit;
  border-right-style: solid;
  border-right-color: green;
}

✅ The child element will inherit the 8px right border from the parent.

5. Best Practices

✔ Always specify border-right-style along with border-right-width because a border with no style is invisible.
✔ Use border-right shorthand when setting width, style, and color together:

border-right: 4px solid black;

✔ If you want uniform borders on all sides, use the border-width property instead:

border-width: 4px;