One Pixel Rounded Corners

After reading blog post of CSS Guy about one pixel rounded corners at Google Analytics web site which is done by using some additional <b> tags I realize that I was using this technique long time ago, but without additional elements. Here is the HTML code:

<ul>
    <li>
        <a href="#">One</a>
    </li>
    <li>
        <a href="#">Two</a>
    </li>
    <li>
        <a href="#">Three</a>
    </li>
</ul>

And here is the CSS:

ul {
    padding: 0;
    margin: 0;
    width: 20%;
}
li {
    background: #000;
    border-bottom: solid 1px #ccc;
    border-top: solid 1px #ccc;
    list-style: none;
    margin: .3em;
    padding: 0 1px;
    position: relative;
}
li a {
    background: #e5e5e5;
    border-bottom: solid 1px #000;
    border-top: solid 1px #000;
    display: block;
    margin: -1px 0;
    padding: .2em;
}

Demo is here.