CSS border-bottom-width Property

border-bottom-width defines the width of the bottom border.

The width is set as a pixel value, or as thin, medium, or thick.

Example

#

A thin border-bottom-width.

An element with a thin bottom border
<style>
  .border-bottom-thin {
    padding: 20px;
    border-bottom-style: solid;
    border-bottom-color: tomato;
    border-bottom-width: thin;
  }
</style>

<div class="border-bottom-thin">
  An element with a thin bottom border
</div>

Using border-bottom-width

The default border-bottom-width is medium or 1 pixel.

A border-bottom-style value is required for a border to show.

Syntax

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

Values

#

Value Description
medium Default. Medium border
thin Thin border
thick Thick border
length Sets border thickness using CSS units
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-bottom-width values.

border-bottom-width: thin
<style>
  .border-bottom-example {
    padding: 20px;
    border-bottom-style: solid;
    border-bottom-color: tomato;
    border-bottom-width: thin;
  }
</style>

<div class="border-bottom-example">
  border-bottom-width: thin
</div>

Browser support

This table shows when border-bottom-width support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides