CSS border-bottom

AntrikshDangi's avatar
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.

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

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

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours