Every box has a border, and by default it is invisible (0 pixels wide)
Borders separates the edge of one box from another
Border is expressed in three parts
Border width: how thick the border will be
Border style: solid, dashed, etc
Border color: color of the border
/*
border is most usually expressed using shorthand
which allows you to specify a combination of the border 3 properties
when using shorthand for border the order of the values does not matter
*/
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
/*
Border can be applied to individual
sides of a box using border-top, border-bottom,
border-left or border-right
*/
border-top: solid 1px blue;
/*
Also you can specify the border properties individually (this approach is not widely used)
*/
border-color: red;
border-style: solid;
border-width: 1px;
border-top-color: blue;
border-bottom-width: 3px;