CSS Borderless tabs using images

<style>
ul.tabs {
border-bottom: 1px solid blue;
height: 20px;
margin: 0;
padding: 0;
list-style-type: none;
}
    ul.tabs li {
    float: left;
    position: relative;
    bottom: 5px;
    margin: 0;
    padding: 0;
    }
        ul.tabs li img {
        float: left;
        height: 20px;
        width: 50px;
        border: none;
        }
    ul.tabs li.selected {
    bottom: -1px;
    }
</style>

<ul class="tabs">
    <li><a href=""><img src="tab1.gif" /></a></li>
    <li class="selected"><a href=""><img src="tab2.gif" /></a></li>
    <li><a href=""><img src="tab3.gif" /></a></li>
</ul>