CSS border-bottom-width (Set/Define Width of Bottom Border)

The CSS border-bottom-width is used when we need to set the width of bottom border of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border-bottom-style: solid; border-bottom-width: 6px;}
      p {border-style: dotted; border-bottom-width: 12px;}
   </style>
</head>
<body>

   <h2>The border-bottom-width Property</h2>
   <br/><br/>
   <p>This is para one.</p>

</body>
</html>

Output

The border-bottom-width Property

This is para one.

Important - To set the width of a border or bottom border, there must be a border to be exist. Therefore, be sure to declare the border first, either by using the border-style or the border-bottom-style property, before using border-bottom-width to change the width of bottom border.

CSS border-bottom-width Syntax

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

border-bottom-width: value;

The value will be one of the following:

length - used to define the thickness as per requirement
thin - used to set thin bottom border
medium - used to set medium bottom border
thick - used to set thick bottom border
initial - used to set the default
inherit - used to inherit the value from its parent

CSS Online Test

« Previous Tutorial Next Tutorial »