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>
      h2 {border-bottom-style: solid; border-bottom-width: 6px;}
      p {border-style: dotted; border-bottom-width: 12px;}

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


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 »

Follow/Like Us on Facebook

Subscribe Us on YouTube