Discussion

In addition to top and bottom borders, a block-level element also can
have a border on the left and right sides via the
border-leftand border-right
properties, respectively. The border-top,
border-bottom, border-left,
and
border-right properties are shorthand properties
that enable developers to set the width, style, and color of each
side of a border.

Without the two shorthand border declarations in the
Solution, the CSS rule for the heading would be expanded by four
extra declarations:

Also available is a shorthand property for the top, bottom, left, and
right shorthand properties: border. The
border property sets
the same style for the width, style, and color of the border on each
side of an element:

h2 {
border: 3px dotted #33333;
}

When setting the borders, make sure to adjust the padding to put
enough whitespace between the borders and the text of the heading.
This aids in readability. Without enough whitespace on a heading
element, the text of the heading can appear cramped.

See Also

Recipe 2.8 for more information on styles of
borders and the shorthand border property.