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:

mediumSpecifies a medium thickness right border. This is the default value.
thinSpecifies a thin right border.
thickSpecifies a thick right border.
lengthSpecifies the thickness of the right border in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initialSets the border-right-width property to its default value(medium).
inheritInherits the border-right-width property from its parent element.

General Info

Default Valuemedium
InheritedNo
JavaScript Usageelement.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