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

css, html

Solution

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/

Problem

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

Original source