One Pixel Rounded Corners

Thu, 08 May 2008

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.