CHAPTER 6 ■ BOX MODELS PROPERTIESBorder
Problem You want to put a border on one or more of the sides of an element.^
Solution You can use a selector to assign the border property to an element. You can independently
set border-left, border-right, border-top, and border-bottom. border affects an element
differently depending on the type of element and its alignment. You can set the style and
color of the border. border:none is the default.
Borders work almost identically to margins. Borders work like margins in the way they
change the position of an element and the position of its neighbors.
The descriptions in the Margin design pattern apply to borders except as follows:
Borders are visible instead of transparent, but you can set the color of a border to
transparent if you want. (Note that Internet Explorer 6 doesn’t support transparent as a
color, but all current browsers do.)
Borders can’t be negative because they’re inside the margin.
Borders between static block elements don’t collapse like margins.
Left and right borders around inline text elements are only visible at the start of the element
and at the end of the element. Right and left borders aren’t drawn where a browser wraps an
inline element across lines.
Top and bottom borders on inline elements overlap neighboring lines unless you increase
the line height to make room for them. In other words, vertical inline borders don’t
automatically increase the height of the line. Notice in the example how the border above
the text Static Inline Shrinkwrapped overlaps the top of its container, and how the word
Element overlaps the previous line.
Because a table’s width and height refer to the outside of its borders (rather than to the
inside of its padding), borders are drawn inside the box specified by width and height. This
means borders don’t add to the size of shrinkwrapped or sized tables. This also means
borders on a stretched table don’t cause it to overflow its container; instead, they indent the
table like a stretched block or a stretched absolute element. Notice in the example how the
width of the sized table’s outer box doesn’t change when borders are enlarged; instead, the
inner box shrinks. Also notice how borders indent the stretched table instead of causing it to
overflow its container as it did in the Margin design pattern and as the stretched float does
in this example.