Smarter Sheep

I found this great example on the Ask the CSS Guy website for slightly rounded corners on css styled buttons. There are no background images used at all to achieve the rounded corners. It’s all done in css using a few nested tags. The conversation in the resulting comments ultimately came up with a great way to do this using negative margins without any extra html tags.

<style>

ul {

    list-style-type:none;

    padding:0;

}

li, li a {

    display:block;

    position:relative;

    border:1px #ccc solid;

    float:left;

}

li {

    border-width:1px 0;

    margin:4px;

}

li a {

    border-width:0 1px;

    margin:0 -1px;

    padding:0.3em 0.5em;

    background-color:#eee;

    text-decoration:none;

    color:#555;

}

li a:hover {

    background-color:#ddd;

}

li > a:hover, li:hover {

    border-color:#aaa;

} 

</style>

<ul>

    <li><a href=“#”>Testlink</a></li>

    <li><a href=“#”> Testlink with more text</a></li>

    <li><a href=“#”> Testlink</a></li>

</ul>