The property allows you to simultaneously set the thickness, style and color of the border at the bottom of the element. The values can go in any order, separated by a space, the browser will determine which one corresponds to the desired property.
border-bottom: [border-bottom-width || border-bottom-style || border-bottom-color]
Example:
border-bottom: 2px solid red;
The border-bottom-width value determines the width of the border.
Several border-bottom-style values are provided to control its appearance. Their names and the result of the action are presented below.
solid - solid border;
dotted - dotted border;
dashed - dotted border;
double - double border;
groove - three-dimensional groove boundary;
ridge - volumetric border with a thick edge (in fact, the inversion of the previous style);
outset - extruded border;
inset - an indented border (in fact, the inversion of the previous style).
border-bottom-color sets the color of the border, the value can be in any valid CSS format.
<div class="example">solid</div>
.example {border-bottom:1px solid green;}