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

Give the elements margins. For example,

HTML:

<ul>
    <li>Stuff</li>
    <li>Other Stuff</li>
<ul>

CSS:

li { border: 1px solid #000; margin: 5px 0; }

jsfiddle example