HTML and CSS Reference
In-Depth Information
The directions are
top
,
bottom
,
left
, and
right
. Alternatively, you can set the values for
each side. If you specify four values, they will be applied to the top, right, bottom, and
left, in that order. If you specify two values, they will be applied to the top and bottom
and left and right. To set different border widths for all four sides of a box, you use the
following style:
p.box { border-width: 1px 2px 3px 4px; }
That's equivalent to the following:
p.box {
border-width-top: 1px;
border-width-right: 2px;
border-width-bottom: 3px;
border-width-left: 4px;
}
To apply different values for the
border
shortcut property to different sides of a box, it's
necessary to use the directional property names. You can't supply multiple values for the
components of the shortcut property. However, the directional properties are treated as
being more specific than the general border property, so you can use styles like this:
Input
▼
p {
border: solid 2px red ;
border-bottom: dashed 4px green;
}
The results are in Figure 8.3.
.
Output
FIGURE 8.3
Border styles.
