CSS border-bottom-width Property

CSS border-bottom-width

The border-bottom-width property in CSS specifies the width of the bottom border of an element. This property allows you to control the thickness of the bottom border using predefined values or custom lengths.

Syntax of border-bottom-width

</>

Copy

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

Values

Value	Description
`medium`	Specifies a medium border width. This is the default value.
`thin`	Specifies a thin border width.
`thick`	Specifies a thick border width.
`length`	Specifies the width of the border in any valid CSS length unit (e.g., `2px`, `0.5em`).
`initial`	Sets the property to its default value (`medium`).
`inherit`	Inherits the value from its parent element.

Default Value

medium

Examples for border-bottom-width

Using the CSS border-bottom-width Property

The following examples demonstrate how to use the border-bottom-width property to set the width of the bottom border.

</>

Copy

/* Set the bottom border width to medium */
.element {
  border-bottom-width: medium;
}

/* Set the bottom border width to thin */
.element {
  border-bottom-width: thin;
}

/* Set the bottom border width to 5px */
.element {
  border-bottom-width: 5px;
}

/* Inherit the bottom border width from the parent */
.element {
  border-bottom-width: inherit;
}

Example for a Thick Bottom Border

Below is an example demonstrating how to apply a thick bottom border using border-bottom-width: thick:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    border-bottom-width: thick;
    border-bottom-style: solid;
    background-color: yellow;
    padding: 5px;
  }
</style>
</head>
<body>

<h1>Thick Bottom Border</h1>
<div class="box">This is sample content.</div>

</body>
</html>

Example for a Bottom Border Width of 20px

border-bottom-width: 20px;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .box {
    border-bottom-width: 20px;
    border-bottom-style: solid;
    background-color: yellow;
    padding: 5px;
  }
</style>
</head>
<body>

<h1>Thick Bottom Border</h1>
<div class="box">This is sample content.</div>

</body>
</html>

Browser Support

The border-bottom-width property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	1.0
Edge	4.0
Firefox	1.0
Safari	1.0
Opera	3.5

TutorialKart

CSS border-bottom-width Property