CSS border-width Property

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

Demo:

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

Example1:

Set the width of the top and bottom borders to 8px, and the width of the left and right borders to 3px:

<!DOCTYPE html> <html> <head> <style> h4 {   border-style: solid;   border-width: 8px 3px; }  </style> </head> <body>  <h4>A heading with a 8px top and bottom border and 3px left and right border.</h4>  </body> </html>

Output:




A heading with a 8px top and bottom border and 3px left and right border.


Syntax:

border-width: medium|thin|thick|length;

medium (default) – defines a medium border.

thin – defines a thin border.

thick – defines a thick border.

length – allows you to specify the thickness of the border (CSS Units).

Example2:

Set the width of the borders to thick:

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

Output:




A heading with a thick border.

A paragraph with a thick border.



Enjoy coding!

Read also:

CSS border Property

CSS border-top-width Property