border-bottom

AntrikshDangi's avatar
AntrikshDangi's avatar
AntrikshDangi
Published Jun 28, 2021Updated Oct 22, 2023
Contribute to Docs

Shorthand property that defines the width, color, and style of the bottom border of an element.

Syntax

border-bottom: <value>;

where <value> can be one of the following:

  • Border width: thick
  • Border style: dashed
  • Border color: #f1f1f1

Note: values can be provided in any order.

Example 1

Set the bottom border of the h1 element to be green, 3 pixels thick, and dotted:

h1 {
  border-bottom: green 3px dotted;
}

The following image demonstrates the code block above:

border-bottom example 1

Example 2

Set the bottom border of the h1 element to be 4 pixels thick, dashed, and blue:

h1 {
  border-bottom: 4px dashed blue;
}

The following image demonstrates the code block above:

border-bottom example 2

All contributors

Contribute to Docs

Learn CSS on Codecademy