Border basics
Learn border-width, border-style and border-color properties.
What is a border?
A border is the frame drawn around the content and padding layers of a box. Three properties work together: border-width sets thickness, border-style sets line type and border-color sets color.
Only border-style is required. If the style is none, the border is not drawn even when width and color are set. That is why you pick a style first for a visible border.
border-style values
border-style takes a few commonly used values. solid draws one unbroken line, dashed short segments, dotted dots and double two parallel lines.
Two special values exist: none removes the border entirely, hidden hides it but still resolves border conflicts in table cells. In most cases solid gives the cleanest result.
Exercise Give the button a border
Write a declaration block for the .button selector. Add border-width, border-style and border-color declarations. For example border-width: 2px, border-style: solid and border-color: #3366cc.
Show example solution
/* add the button border */
.button {
border-width: 2px;
border-style: solid;
border-color: #3366cc;
}Test yourself
-
Which property sets the line type (solid, dashed, dotted) of the border?
- border-color
- border-style
- border-width
- background-color
Show answer
border-style — Correct. border-style sets the line type; values include solid, dashed and dotted.
-
Write the unbroken line type
.box { border-width: 2px; border-style: ____; border-color: #444; }Show answer
.box { border-width: 2px; border-style: solid; border-color: #444; } -
Match each property to its job
- border-width
- Border thickness
- border-style
- Line type
- border-color
- Border color