CSS border-top-width: Set or Change the Width of the Top Border

The CSS border-top-width property is used when we need to define or change the width of the 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.

In the above example, the "h2" selector targets all h2 elements, whereas the "p" selector targets all p elements. Here is a description of the CSS code:

border: 3px solid crimson; sets a border of 3 pixels width with a solid line style and a color of crimson (a dark red).
border-top-width: 12px; sets the top border width to 12 pixels, making it thicker than the other borders.
padding: 10px; adds 10 pixels of padding to the inside of the element, creating space between the text and the border.
border: 3px solid palevioletred; sets a border of 3 pixels width with a solid line style and a color of palevioletred (a light purple).
border-top-width: 8px; sets the top border width to 8 pixels, making it thinner than the other borders.

CSS border-top-width syntax

The syntax of the 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 a thin top border
medium: used to define the medium top border
thick: used to define a thick top border
length: used to define a custom-sized top border
initial: used to define the default value for the size of the top border
inherit: used to inherit the value from its parent

The medium is default for all.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!