CSS: border-right-style property

This CSS tutorial explains how to use the CSS property called border-right-style with syntax and examples.

Description

The CSS border-right-style property defines the line style of the right border of a box.

The syntax for the border-right-style CSS property is:

border-right-style: value;

value

The line style to use for the right border. It can be one of the following:

Value	Description
none	No border (This is the default) div { border-right-style: none; }
solid	Single, straight, solid line div { border-right-style: solid; }
dotted	Series of dots div { border-right-style: dotted; }
dashed	Series of short dashes div { border-right-style: dashed; }
double	Two straight lines that total the pixel amount defined by border-right-width div { border-right-style: double; }
groove	Carved effect div { border-right-style: groove; }
ridge	3D appearance where border looks like it is "coming out" (opposite of groove) div { border-right-style: ridge; }
inset	Embedded appearance div { border-right-style: inset; }
outset	Embossed appearance (opposite of inset) div { border-right-style: outset; }
hidden	Border is hidden div { border-right-style: hidden; }
inherit	Element will inherit the border-right-style from its parent element div { border-right-style: inherit; }

Since the default value for CSS border-right-style is none, you must set a CSS border-right-style value for your right border to appear.
See also the border-right-color, border-right-width, and border-right properties.

The CSS border-right-style property has basic support with the following browsers:

We will discuss the border-right-style property below, exploring examples of how to use this property in CSS.

Let's look at an example where we set a solid right border.

div { border-right-style: solid; }

In this CSS border-right-style example, we have set the style of the right border to solid.

Next, let's set our right border style and the right border color.

div { border-right-style: dashed; border-right-color: blue; }

In this border-right-style example, we have set the right border style to a blue dashed line.