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

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;
}