CSS border-right Property

CSS border-right property specifies the element’s right side border. It sets the width, style, and color of the right border in a single declaration.

This paragraph has a red color right border.

The border-right property is a shorthand of following three properties:

Example:

h1{
  border-right: 5px solid red;
}
h2{
  border-right: 5px dashed blue;
}
p{
  border-right: dotted; /* pass only required value */
}

If the color of the border is not specified, it will be same as element’s text color. See the example below:

Example:

h1{
  color: red; 
  border-right: solid; /* border color not specified */
}
h2{
  color: green;   
  border-right: dashed; /* border color not specified */
}

CSS Syntax

The border-right property has following syntax:

border-right: border-right-width border-right-style border-right-color|initial|inherit;

Property Values

The border-right property accepts following values:

border-right-widthSpecifies the width of the right border. The default value is medium.
border-right-styleSpecifies the style of the right border like ‘solid’, ‘dashed’, etc. Default value is solid.
border-right-colorSpecifies the color of the right border. Default value is the current color of the element.
initialSets the border-right property to its default value. Which is none.
inheritInherits the border-right property from the element’s parent.
noneThis is the default value. It removes any existing right border(On setting border-right to none means setting border-right-style to none).

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderRight = “5px solid red”

Related Pages

CSS Tutorial: CSS Borders