Properties
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:
- 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
-
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.