The CSS border properties define the width, line style, and colour of the border of a box.

Syntax:
border: border-width border-style border-color;
where:
border-width – specifies the width of the border.
border-style – specifies the style of the border.
border-color – specifies the colour of the border.
Example:
.square {
border: 5px solid blue;
height: 200px;
width: 200px;
}
Output:

The border-style property specifies what kind of border to display:
dotted – defines a dotted border:
p.dotted {border-style: dotted;}
dashed – defines a dashed border:
p.dashed {border-style: dashed;}
solid – defines a solid border:
p.solid {border-style: solid;}
groove – defines a 3D grooved border. The effect depends on the border-color value:
p.groove {border-style: groove;}
ridge – defines a 3D ridged border. The effect depends on the border-color value:
p.ridge {border-style: ridge;}
inset – a 3D inset border. The effect depends on the border-color value:
p.inset {border-style: inset;}
outset – defines a 3D outset border. The effect depends on the border-color value:
p.outset {border-style: outset;}
rounded – the border-radius property is used to add rounded borders to an element:
p.round {border: 2px solid blue;border-radius: 12px;}
mixed – you can specify a different border for each side.
p.mix {border-style: dotted dashed solid double;}
multicolored-border – can have from one to four values (for the top border, right border, bottom border, and the left border).
p.color {border-style: solid;border-color: #ff0000;}
Enjoy coding!
Read also:
Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape