Web Design in a Nutshell, 3rd Edition

Border pecking order

If there can only be one border between each pair of cells, what happens when neighboring cells have conflicting border styles? The authors of CSS anticipated this problem and devised a system for resolving border conflicts.

• Borders with border-style set to hidden take precedence over all other border styles, so the border will not display.

• Borders with a style of none have the lowest priority. That means that if there is any border specified at all, it will win out and display on the edge of a cell with borders set to none.

• Wider borders win over narrower ones, regardless of the border style.

• If the neighboring borders are the same width, then it comes down to a battle of styles. The CSS 2.1 specification establishes this pecking order for border styles (in order from most to least precedence): double, solid, dashed, dotted, ridge, outset, groove, and (the lowest) inset. That means if one cell has a five-pixel dashed border and its neighbor has a five-pixel groove border, the dashed border will “win” and display between the cells.

• If the border styles differ only in color, then it comes down to the table layer order (Figure 22-3) to determine which border is visible. Styles set on cells win out over rows, and row settings win over row groups, columns, column groups, and finally table.