CSS border-bottom-width: Set or define the width of the bottom border

The CSS border-bottom-width is used when we need to set the width of the 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.

The first style rule affects all h2 elements by setting the border-bottom-style and border-bottom-width properties. It does so by changing the border-bottom-style to "solid" and the border-bottom-width to 6 pixels. This will result in a 6 pixel wide solid line at the bottom of the h2 element.

The second style rule affects all p elements by setting the border-style and border-bottom-width properties. It specifies the border-style as "dotted" and the border-bottom-width as 12 pixels. This will create a dotted line around the entire p element, with a thicker dotted line 12 pixels wide at the bottom.

When this code is rendered in a web browser, the heading will have a 6 pixel wide solid line at the bottom, and the paragraph will have a dotted border with a thicker 12 pixel wide dotted line at the bottom. The br tags are used to insert two line breaks that separate the heading from the paragraph.

Important: To set the width of a border or bottom border, there must be a border. 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 the bottom border.

CSS border-bottom-width syntax

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

border-bottom-width: value;

The value will be one of the following:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!