CSS border-top-width Property

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

Demo:

Syntax:

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

medium (default) – defines a medium top border.

thin – defines a thin top border.

thick – defines a thick top border.

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

Example1:

Set the width of the top border to the medium:

<!DOCTYPE html> <html> <head> <style> p {   border-top-style: solid;   border-top-width: medium; }  div {   border-style: solid;   border-top-width: medium; } </style> </head> <body>  <p>A paragraph with a medium top border.</p> <div>A div element with a medium top border.</div>  </body> </html>

Output:



A paragraph with a medium top border.

A div element with a medium top border.



Example2:

Set the width of the top border to 5px:

<!DOCTYPE html> <html> <head> <style> p {   border-top-style: solid;   border-top-width: 5px; }  div {   border-style: solid;   border-top-width: 5px; } </style> </head> <body>  <p>A paragraph with a 5px thick top border.</p> <div>A div element with a 5px thick top border.</div>  </body> </html>

Output:




A paragraph with a 5px thick top border.

A div element with a 5px thick top border.



Enjoy coding!

Read also:

CSS border-bottom-width Property

CSS border-radius property