X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS border-bottom-width Property

The border-bottom-width property sets the width of the bottom border.

You need to set the border-style or the border-bottom-style property before the border-bottom-width property. First you need to have borders before you can change the width.

The specification doesn't set the exact thickness set by each keyword, the precise result when using one of them is implementation-specific. But they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.

Initial Value medium
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. The width can be animatable.
Version CSS1
DOM Syntax object.style.borderBottomWidth = "5px";

Syntax

border-bottom-width: medium | thin | thick | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-style: dotted;
        border-bottom-width: thick;
      }
    </style>
  </head>
  <body>
    <p>As you can see, we used border-bottom-width property to set the width of bottom border of this element.</p>
  </body>
</html>

Here is another example with a medium width of the bottom border.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      h2 {
      border-bottom-style: groove;
      border-bottom-width: medium;
      }
      div {
      border-style: groove;
      border-bottom-width: medium;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a medium bottom border.</h2>
    <div>A div element with a medium bottom border.</div>
  </body>
</html>

See another example where you can see the difference between 20px thin width of the bottom border and 20px thick width of the bottom border.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      padding: 5px;  
      border-bottom-style: ridge;
      border-bottom-width: 20px thin;
      }
      div {
      padding: 5px;  
      border-style: ridge;
      border-bottom-width: 20px thick;
      }
    </style>
  </head>
  <body>
    <h2>A heading with 20px thin bottom border</h2>
    <div>A div element with 20px thick bottom border.</div>
  </body>
</html>

Values

Value Description
medium Sets a medium bottom border. It is the default value.
thin Sets a thin bottom border.
thick Sets a thick bottom border.
length With the help of this you can set the thickness of the bottom border.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.


Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which is the default value of border-bottom-width Property



Do you find this helpful?

Related articles