1. css
  2. /properties
  3. /border-bottom-width

border-bottom-width

Definition

The border-bottom-width property is a CSS property that specifies the width of the bottom border of an element. It is used to control the thickness of the element's bottom border.

Examples

Length value

.element {
  border-bottom-width: 10px;
}

Keyword value

.element {
  border-bottom-width: thin;
}

Global values

.element {
  border-bottom-width: inherit;
  border-bottom-width: initial;
  border-bottom-width: unset;
}

Values

ValueDescription
<length>Specifies the width of the border using a fixed size.
thinThe border is thin.
mediumThe border is medium.
thickThe border is thick.
initialSets the border-bottom-width to its default value.
inheritThe element inherits the border-bottom-width value from its parent element.
unsetThe element's border-bottom-width is set to the value specified in the user agent's style sheet, if any. If there is none, it will be the default value.

Best Practices

  • Use a reasonable width value for the border to avoid creating borders that are too thin or too thick.
  • Avoid using too many different border widths on a single page as it can be visually overwhelming.
  • Make sure the border width matches the overall design and layout of your site.
  • Use the border-bottom-width property in conjunction with the border-bottom-style and border-bottom-color properties to fully define the bottom border of an element.
  • Consider the layout and hierarchy of your content when deciding which border width to use. For example, you may want to use a thicker border for header elements but a thinner border for subheadings.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes