HTML and CSS Reference
In-Depth Information
4.
If the two borders have the same width but different styles, the border style with the
highest priority is used. Double borders have the highest priority, followed by solid,
dashed, dotted, ridge, outset, groove, and fi nally inset borders.
5.
If the borders differ only in color, the color from the table object with the high-
est priority is used. The highest priority color belongs to the border surrounding
individual table cells; followed by the borders for table rows, row groups, columns,
and column groups; and fi nally the border around the entire table.
Any situation not covered by these rules is left to browsers to determine which border
dominates when collapsing the two borders. Figure 5-33 provides an example of the fi rst
rule in action. In this example, the border around the entire table is hidden but a 1-pixel
blue border is assigned to the cells within the table. When collapsed, any cell borders
that are adjacent to the table border adopt the hidden border property.
Figure 5-33
Reconciling hidden borders
hidden borders take pre
cedence
over all other borders
separate borders
collapsed borders
table {border-style: hidden;
border-collapse:
separate;
}
td {border: 1px solid blue;}
table {border-style: hidden;
border-collapse:
collapse;
}
td {border: 1px solid blue;}
Figure 5-34 shows what happens when two borders of the same width but different
styles meet. In this case, because of Rule 4, the table cell borders with the double blue
lines take precedence over the solid red lines of the table border when the two borders
are collapsed into one.
