Add spacing between double borders at bottom of <ul> with <li> elements

Question

I'd like to have two 1px (or 2px) seperated lines at the bottom of my <ul> list.

This is what I have so far.

HTML

<ul>
    <li>here's one </li>
    <li>here's another one</li>
    <li>here's the last one</li>
</ul>​

CSS

ul {
    border-bottom: 1px solid black;
}
ul li {
    border-top: 1px solid red;
}
ul li:last-child {
    border-bottom: 1px solid red;
}
​

See it on jsfiddle.

How can I get some spacing between the bottom borders (the red and black)?

Answer 1

A simple solution would be adding padding to the bottom of the UL:

ul {
    border-bottom: 1px solid black;
    padding-bottom: 10px; /* your desired spacing */
}

Your updated demo here: http://jsfiddle.net/tnevg/4/