List items without overlapping borders

Question

I have a <ul> that WOULD be dynamically added to using jQuery or whatnot. Each <li> would have a separate box around it, basically a selector.

However, I notice and anticipated that each <li>'s bottom border is overlapping with the next. Here's an example:

http://jsfiddle.net/gANNJ/

Is there a way to remove this? Should I just use separator divs instead?

Answer 1

li {
    margin-top: -1px;
    border: 1px solid red;
    padding: 10px;
}

Cheap way of doing it ><. They are not overlaping, its just 2px border from top and bottom