Like margin and padding (which you’ll learn about in more detail 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.

Again, there are three properties that make up a border:

Width
Style
Color

Border Width

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.

Border Style

The second property that defines a boxes border is the “border style” (border-style: ). This takes a predefined keyword as its property:

solid
dashed
dotted
double
inset
outset
groove
ridge
hidden
none

Border Color

The final property that defines borders is “border color” (border-color: ).

Border color, like color: and background-color: , accepts an rgb(), rgba(), hex, or other color value.