CSS border-style Property

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

Demo:

The CSS border-style property can have from one to four values.

Each side of the border (top, right, bottom, left) can have a different style.

Example1:

<!DOCTYPE html> <html> <head> <style> .one { border-style: dotted solid dashed double; }  </style> </head> <body>  <h4 class="one">This is a heading.</h4>  </body> </html>

Output:




This is a heading.


Syntax:

border-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.

Example2:

Set different borders on each side of an element:

<!DOCTYPE html> <html> <head> <style> .a {border-style: solid dotted dashed double;} .b {border-style: solid dotted dashed;} .c {border-style: solid dotted;} .d {border-style: solid;} </style> </head> <body>  <h4 class="a">This is a heading.</h4> <h4 class="b">This is a heading.</h4> <h4 class="c">This is a heading.</h4> <h4 class="d">This is a heading.</h4>  </body> </html>

Output:




This is a heading.

This is a heading.

This is a heading.

This is a heading.


Enjoy coding!

Read also:

CSS border Property

CSS border-color Property