Border-bottom

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>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-bottom: 4px dotted #1c87c9;
      }
    </style>
  </head>
  <body>
    <p>This is some example.</p>
    <div> Example for the border-bottom property.</div>
  </body>
</html>

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.