In this chapter we will learn how to use the border-bottom property.

The border-bottom CSS property is a shorthand that sets the values of border-bottom-width, border-bottom-style and border-bottom-color.

These properties describe the bottom border of elements.

CSS Syntax

border-bottom: border-width border-style border-color | initial | inherit;

Let's see an example:

<!DOCTYPE html>
    <title>Title of the document</title>
      div {
        border-bottom: 4px dotted #1c87c9;
    <p>This is some example.</p>
    <div> Example for the border-bottom property.</div>

Property Values

Value Descriptions
border-width Indicates the width of the top border.
border-style Indicates the style of the top border.
border-color Indicates the color of the top border.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.