Adding Borders and Drop Shadows - Beginning CSS3 - page 184

he border-style shorthand has two values, so the first one applies a solid border to the top and bottom,
while the second one sets the left and right borders to none . he border-width then sets the border on all sides
to 1px . This doesn't affect the horizontal alignment of the paragraph because border-style has eliminated the
left and right borders. So, in effect, the 1px border is added only to the top and bottom. If you find this difficult to
comprehend, you can achieve exactly the same effect with the following styles:
border-top: solid 1px;
border-bottom: solid 1px;
Whichever way you choose, it's not necessary to specify a color because it's the same as the text.
The flexibility of the shorthand properties is very convenient, but you need to be careful when using the
border shorthand property in combination with other border properties.
Browsers tend to use different colors for the inset and outset border styles, so it's usually better to create a
custom style to add an embossed or indented border. This requires a solid border that's the same width on all four
sides. The only property that needs to be adjusted on different sides is the color. The styles in border_override.
html use the border shorthand property in combination with border-color shorthand to create an embossed
effect like this:
#correct {
border: solid 6px;
border-color: #5C9D9D #003636 #003636 #5C9D9D;
}
he border property sets the style and width of all four borders to solid and 6px . he border-color property
then sets the colors for each side independently. This works because border-color is setting the value that was
missing from the border shorthand
However, the style rule for the indented border not only changes the order of colors, but also puts the border
property last like this:
#incorrect {
border-color: #003636 #5C9D9D #5C9D9D #003636;
/* This overrides the border-color properties */
border: solid 6px;
}
As Figure 9-3 confirms, putting the border property last overrides border-color . Instead, a white border is
used, picking up the color from the text.
Figure 9-3. The order of the shorthand properties affects the result