CSS border-right-style Property

The CSS border-right-style property settles the style of an element's right border.

Demo:

Syntax:

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

none (default) – defines no border.

hidden – a border is not visible.

dotted – defines a dotted border.

dashed – defines a dashed border.

solid – defines a solid border.

double – defines a double border.

groove – defines a 3D grooved border.

ridge – defines a 3D ridged border.

inset – defines a 3D inset border.

outset – defines a 3D outset border.

Example1:

A dashed left border:

<!DOCTYPE html> <html> <head> <style> h4 {   border-right-style: dashed;   padding:10px; }  p {   border-style: solid;   border-right-style: dashed;   padding:10px; } </style> </head> <body>  <h4>A heading with a dashed right border.</h4> <p>A paragraph with a dashed right border.</p>  </body> </html>

Output:




A heading with a dashed right border.

A paragraph with a dashed right border.



Example2:

<!DOCTYPE html> <html> <head> <style> h4 {   border-right-style: dotted;    }  p {   border-style: solid;   border-right-style: dotted;    } </style> </head> <body>  <h4>A heading with a dotted right border.</h4> <p>A paragraph with a dotted right border.</p>  </body> </html>

Output:




A heading with a dotted right border.

A paragraph with a dotted right border.



Enjoy coding!

Read also:

CSS border Property

CSS border-left-style