CSS Border-Bottom Property

The border-bottom property defines the bottom border of an element. It is a shorthand that defines the style, width, and color of the bottom border. It is the combination of the following three properties:

• border-bottom-style
• border-bottom-width
• border-bottom-color

It does not matter what order the values appear in. In addition, not all three values need to be present. If a value is not present, it will be set to the default. The default value for each property is as follows:

• border-bottom-style: none
• border-bottom-width: medium
• border-bottom-color: black

Note that the default value for border-bottom-style is "none," so if the border-bottom-style is not defined in border-bottom, no border will appear.

Example 1: All three values are defined

CSS Declaration

width: 200px; height: 100px; border-bottom: dotted 10px #C00;

results in the following

Example 2: Only two values are defined

CSS Declaration

width: 200px; height: 100px; border-bottom: rgb(102,178,255) solid;

results in the following:

In Example 2, the width of the bottom border is not defined, so it is set to the default value of "medium."