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.

I've tried omiting the border from one of the sides, but that works only for elements in the middle, the first and final element will miss a border.

Does somebody know a solution for list elements for example?

Answer 1

Here's how I solved it: add a margin-left/-top of -1px to each li element. Then the borders really collapse without any tricks.

Answer 2

You can add a left and bottom border to the ul and drop it from the li.

fiddle: http://jsfiddle.net/TELK7/

html:

<ul>     <li>one</li>     <li>two</li> </ul> 

css:

ul{     border: 0 solid silver;     border-width: 0 0 1px 1px; } li{     border: 0 solid silver;     border-width: 1px 1px 0 0;     padding:.5em; }