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.