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

Next lesson: Border radius

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies