Like margin and padding (which you’ll learn about soon), borders help define the amount of space a box or element takes up, as well as its relationship to other boxes.
Unlike margin and padding, however, the border portion of the box can be separately colored, and has multiple style options. Border is more of a visual styling tool, than a space management tool.
There are three properties that make up a border:
The first property that defines a boxes border is the “border width” (
border-width: ). This takes a measurement value that may be pixels, points, percentages, or ems.
The second property that defines a boxes border is the “border style” (
border-style: ). This takes a predefined keyword as its property:
The final property that defines borders is “border color” (
Border color, like
background-color: , accepts an rgb(), rgba(), hex, or other color value.