CSS border-right-width Property

CSS border-right-width property specifies the thickness of the element’s right-border.

The thickness of the border can be specified using keywords like ‘thin’, ‘medium’, ‘thick’, or using a CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.

See the paragraph below. It has a thick right border.

This paragraph has a thick right border

Example:

p.medium{
  border-right-width: medium;
}
p.thin{
  border-right-width: thin;
}
p.thick{
  border-right-width: thick;
}
p.pixel{
  border-right-width: 3px;
}

Note: An element must have a border before applying the border-right-width property. Otherwise, the property will have no effect on the element.

---

CSS Syntax

The border-right-width property has following syntax:

border-right-width: medium|thin|thick|length|initial|inherit;

Property Values

The border-right-width property accepts the following values:

medium	Specifies a medium thickness right border. This is the default value.
thin	Specifies a thin right border.
thick	Specifies a thick right border.
length	Specifies the thickness of the right border in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initial	Sets the border-right-width property to its default value(medium).
inherit	Inherits the border-right-width property from its parent element.

General Info

Default Value	medium
Inherited	No
JavaScript Usage	element.style.borderRightWidth = “3px”

More Examples

Set the right border width using ‘rem’.

Example:

p{
  border-right-width: 0.3rem;
}

---

Set the right border width using ’em’.

Example:

p{
  border-right-width: 0.3em;
}

---

Related Pages

CSS Tutorial: CSS Borders