CSS border-right-style Property

CSS border-right-style property allows us to set the style of the element’s right border. For example, you can set a ‘solid’, ‘dashed’, ‘dotted’, etc. kind of border styles.

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

This paragraph has a dashed right border.

Example:

h1{
  border-right-style: dashed;
}
h2{
  border-right-style: dotted;
}

There are various types of border styles available in CSS. Try out the below example to have a look:

Example:

p.solid { border-right-style: solid; }
p.dashed { border-right-style: dashed; }
p.dotted { border-right-style: dotted; }
p.double { border-right-style: double; }
p.groove { border-right-style: groove; }
p.ridge { border-right-style: ridge; }
p.inset { border-right-style: inset; }
p.outset { border-right-style: outset; }
p.hidden { border-right-style: hidden; }
p.none { border-right-style: none; }

Output:

A solid right border

A dashed right border

A dotted right border

A double right border

A groove right border

A ridge right border

An inset right border

An outset right border

A hidden right border

No border

CSS Syntax

The border-right-style property has the following syntax:

border-right-style: solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none|initial|inherit;

Property Values

The border-right-style property accepts following values:

solidSpecifies a solid border.
dashedSpecifies a dashed border.
dottedSpecifies a dotted border.
doubleSpecifies a double border.
grooveSpecifies a 3D grooved border.
ridgeSpecifies a 3D ridge border.
insetSpecifies a 3D inset border.
outsetSpecifies a 3D outset border.
hiddenHides the border.
noneSpecifies no border. This is the default value.
initialSets the border-right-style to its default value(none).
inheritInherits the border-right-style from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderRightStyle = “dashed”

Related Pages

CSS Tutorial: CSS Borders