CSS border-top-width (Set/Change the Width of Top Border)

The CSS border-top-width property is used when we need to define/change the width of top border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border: 3px solid crimson; border-top-width: 12px; padding: 10px;}
      p {border: 3px solid palevioletred; border-top-width: 8px; padding: 10px;}
   </style>
</head>
<body>

   <h2>The border-top-width Property</h2>
   <p>This is a para.</p>
   
</body>
</html>

Output

The border-top-width Property

This is a para.

CSS border-top-width Syntax

The syntax of border-top-width property in CSS, is:

border-top-width: x;

The value of x should be any of the following:

thin - used to define thin top border
medium - used to define medium top border
thick - used to define thick top border
length - used to define custom size top border
initial - used to define the default value for the size of top border
inherit - used to inherit the value from its parent

The medium is default from all.

CSS Online Test

« Previous Tutorial Next Tutorial »