TIPS - CSS: Professional Techniques for Modern Layout - page 76

Figure 3-3: The difference between united and unitless line-height values.

AVOID STYLE-LESS BORDER VALUES
Borders can add a nice touch to any design, but without a style, the border you meant your
border declaration to create will be missing in action.

When I say “without a style,” I don't mean CSS styles; I mean a border-style value. For
example, suppose you write:

form { border : 2px gray ;}

Great, except that no border will be placed around your forms. h e reason is simple: the
omission of a border-style value means that the default value for border-style was
used. And what is that default value? none . So the preceding rule is exactly equivalent to
saying:

78

form { border : 2px gray none ;}

A border with a border-style of none will never be drawn, no matter how wide you
make its border-width value—because a border that doesn't exist can't have any width.

CONTROLLING BORDER APPEARANCE WITH COLOR
From time to time, you may i nd yourself with the need (or just plain desire) to create an inset
or outset border. I'm not here to judge, but I am here to point out a possible pitfall. Consider:

div { border : 5px red outset ;}

Simple enough, right? But look at how that gets handled in various browsers (see Figure 3-4).