Page Layout with CSS - HTML5 with CSS3 - page 298

Or declare all four sides at once with the shorthand border property (note that the order of the three
values doesn't matter):
.intro { border-top: purple 3px double; }
Furthermore, you can declare a single border trait for each side of the box the same way you can declare
padding and margins, going clockwise around the box in order: top, right, bottom, left:
.intro {
border-width: 3px 1em 1px 0.25in;
border-style: dashed dotted solid double;
border-color: red blue orange green;
}
As with padding and margins, these shorthand border properties also take two or three values for
matching sides, or one value for all four sides:
.intro {
border-width: 6px;
border-style: dashed solid;
border-color: red blue green;
}
Border widths can't be specified as percentages, but you can use any unit of measure, or use the
keywords thin , medium , or thick . The value thin is usually equal to 1px , medium is usually 3px , and
thick is usually 5px , but these may vary across browsers. A border width of 0 will effectively disable the
border, useful for removing borders that are present by default or that carry over from some other rule in
your style sheet.
Borders come in a variety of styles, designated by keyword:
 none : no border.
 hidden : no border, the same as none , but this value is specifically intended to resolve rendering
conflicts in table elements. For elements that aren't part of a table, use none .
 dotted : a line of evenly spaced dots. The dots may be round or square in thicker borders,
depending on the browser.
 dashed : a dashed line. Thicker borders have longer dashes, in proportion to the border width.
 solid : a solid line.
 double : two solid, parallel lines. The lines plus the space between them totals the border width.
 groove : a solid border with highlights and shading as if it were engraved into the page surface.
 ridge : the opposite of groove , this border reverses the lighting effect so the border appears
raised from the page surface.
 inset : appears as if the box is set into the page, with the top and left borders shaded and the
right and bottom borders highlighted, as though it were three dimensional and lit from the top left.