Border shorthand
Write borders in one line with the border shorthand.
The border shorthand
Instead of writing three properties separately, the border shorthand gathers them in one line. The typical form is border: 2px solid #333. Thickness, type and color are given in that order.
The order is actually flexible; the browser recognizes each value by its kind. But for readability the width - style - color order is common. Omitted values fall back to defaults; for example, if color is left out the text color is used.
Telling the values apart
Each value in the shorthand belongs to a kind. Lengths like pixels or rem are width; keywords such as solid or dashed are style; color names, hex or rgb() values are color.
The browser makes this distinction by type, so border: solid 2px #333 is also valid. Picking a consistent order within a team still makes the code easier to read.
Exercise Add a border to the card
Write a declaration block for the .card selector. Add the border: 1px solid #ccc declaration. The shorthand gives width, style and color in one line.
Show example solution
/* card border */
.card {
border: 1px solid #ccc;
}Test yourself
-
Which usage states thickness, type and color explicitly?
- border: solid;
- border: 2px;
- border: 2px solid #333;
- border: #333;
Show answer
border: 2px solid #333; — Correct. 2px gives thickness, solid the type, #333 the color.
-
Write the shorthand property
.note { ____: 1px solid #999; }Show answer
.note { border: 1px solid #999; } -
Match the values of border: 2px solid #333
- 2px
- Thickness
- solid
- Line type
- #333
- Color