CSS border-right-style Property

The border-right-style property sets the style of the right border of an element. Note that in many cases the shorthand CSS property border-style is more convenient and preferable.

Formal syntax: <line-style> 

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

• noneBorder is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn.
• hiddenSame as none, except in terms of conflict resolution of collapsed borders. Any element with a hidden border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.
• dottedA series of round dots.
• dashedA series of square-ended dashes.
• solidA single line segment.
• doubleTwo parallel solid lines with some space between them.
• grooveDisplays a border leading to a carved effect. It is the opposite of ridge.
• ridgeLooks as if it were coming out of the canvas.
• insetLooks as if the content on the inside of the border is sunken into the canvas.
• outsetLooks as if the content on the inside of the border is coming out of the canvas.
• inherit

.class {
   border-right-style: dotted;
}

Click the button below to experiment with this property.

Give it a Try!

1+

6+

1+

1+

8+

• Share on Facebook
• Share on Twitter
• Share on Google+