css - 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?

question from:https://stackoverflow.com/questions/5737693/simulating-border-collapse-in-lists-no-tables

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