Simulating border-collapse in lists (no tables)

Question

I have always the same problem, when I have 2 adjacent elements with borders, the borders are merged. With tables we have the border-collapse property for solving this.

Answer 1

Little late to this party, but here's how to get a list item's complete border to change on hover.

First, just use (top and side) borders on the li elements, then give the last one a bottom border.

li:last-child {border-bottom:2px solid silver;}

Then, choose a hover border style:

li:hover {border-color:#0cf;}

Finally, use a sibling selector to change the next item's top border to match your hover item's hover border.

li:hover + li {border-top-color:#0cf;}

http://jsfiddle.net/8umrq46g/