CSS border-bottom
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:

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:

Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve 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