CSS Box Model

          This property is used to specify how the border of the element should look. There are three properties of border which can be changed to achieve the desired layout/design (CSS - Borders - Tutorialspoint, n.d.).

          border-color – it is used to specify the color of the border. It is also possible to change the individual color of the border (top, bottom, left and right). To do this, the property border-bottom-color, border-top-color, border-leftcolor and border-right-color are used.

          border-style – the style of border can also be changed. Normally, the value solid is used since it creates a single solid line border. But there are a lot of values that can be used for border-style. It could be none (no border), dotted (series of dots), dashed (series of short lines), double (two solid lines) and many more. Just like border-color, it is also possible to change the style of each side of the border. For the different border styles, you may refer to Figure 1.

Figure 1. Different border styles applied in an element.
(Source: https://www.tutorialspoint.com/css/css_borders.htm)

          border-width – it specifies the width of an element border. The value of this property can be set in using length (px, pt or cm) or set to thin, medium or thick. Each side of the border can also have different widths. If there is only one value for the width, it means all sides of the border will have that width value. However, if there will be two values, the first value corresponds to the top and bottom while the second value corresponds to the left and right. If 4 values are given, each value corresponds to top, right, bottom and left side of the border, respectively.

          All the three properties can be merged into one shorthand property. Using the border property, you can set the width, style and color at the same time in this particular order.