Adding Borders and Drop Shadows - Beginning CSS3 - page 183

Three values: The first applies to the top, the second to the left and right, and the third
to the bottom.

Four values: The values are applied in clockwise order starting from the top.
he border-top , border-right , border-bottom , and border-left shorthand properties accept a space
separated list of the color, style, and width values that you want to apply to that side. The values can be in any
order. Omitted values use the initial value listed for the individual property in Table 9-1 .
Using the shorthand properties, the styles in single_borders.html could be simplified like this:

h1 {
color: #933;
padding-bottom: 3px;
border-bottom: solid 10px;
}
.important {
border-bottom: double 3px;
}
h2 {
border-left: teal solid 20px;
padding-left: 10px;
margin-left: 30px;
}

he border shorthand property also takes a space separated list of color, style, and width values, which can
be in any order. The same value is applied to all four sides of the element. If a value isn't specified, the initial value
for the individual property is applied.
If you want the same border on all four sides, the border shorthand is clearly the best option. For example,
the following definition creates a 4px double red border around an element:
border: 4px double #F00;

It couldn't be much simpler.

■ The default border style is none . if you forget to specify a style, no border is created, even if you set a color
and/or width. To make a border invisible, but preserve its width, set its color to transparent . This can be useful to
prevent an element from moving if you display a border only when you mouse over it.

Tip

Combining Shorthand Properties
You can mix the border shorthand properties to achieve the effect you desire. For example, the styles in
combined_shorthand.html use border-style and border-width to add a top and bottom border to a paragraph
in the same way as the preceding Tip like this:
.tip {
text-indent: 0;
padding: 1em 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border-style: solid none;
border-width: 1px;
}