The border universal property allows you to simultaneously set the width, style, and color of the border around an element. The values can go in any order, separated by a space, the browser will determine which one corresponds to the desired property. To set a border only on certain sides of an element, use the border-top, border-bottom, border-left, border-right properties.
border-top - style for the top border;
border-right - for the right border;
border-bottom - for the bottom border;
border-left - for the left border.
border: [border-width || border-style || border-color] | inherit
Example:
border: 1px solid gray;
The border-width value determines the width of the border.
Several border-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-color sets the color of the border, the value can be in any valid CSS format.
<div class="example-border">solid</div>
.example-border {border:1px solid green;}