Tab Controller in CSS3

Built from a forrst post by GAV1N

by kizer

HTML

<ul class=tabs>
    <li class="first-tab"><a href="#" >One</a></li>
    <li class="middle-tab"><a href="#" >Two</a></li>
    <li class="middle-tab"><a href="#" >Three</a></li>
    <li class="middle-tab"><a href="#" >Four</a></li>
    <li class="middle-tab"><a href="#" class="current" >Five</a></li>
    <li class="last-tab"><a href="#">Six</a></li>
    
</ul>

CSS

ul.tabs { 
    list-style:none; 
    margin:0 !important; 
    padding-bottom:1.5em;   
}

ul.tabs li { 
    float:left;  
    text-indent:0;
    padding:0;
    margin:0 !important;
    list-style-image:none !important;
}

ul.tabs li a {   
    color:#777;
    font-size:11px;      
    font-weight:bold;   
    font-family:Arial,sans-serif;
    color:#333;
    display:inline-block;
    text-align:center;  
    text-decoration:none;
    padding: 6px 12px 6px 12px;
    margin:0 0 20px 0;
    position:relative;
    letter-spacing:0.25px;    
    border:1px solid #999;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(188,188,188)),
        color-stop(0.13, rgb(232,232,232)),
        color-stop(0.29, rgb(255,255,255))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(188,188,188) 0%,
        rgb(232,232,232) 13%,
        rgb(255,255,255) 29%
    );
    background-color: #fff;
}

ul.tabs li a.current {         
    background-color: #BDBDBD;
    text-shadow:0 1px 1px rgba(255, 255, 255, 1);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.71, rgb(189,189,189)),
        color-stop(0.87, rgb(153,153,153)),
        color-stop(1, rgb(122,122,122))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 71%,
        rgb(153,153,153) 87%,
        rgb(122,122,122) 100%
    );
} 

ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    cursor:default !important;      
}

ul.tabs li.first-tab a {
    -moz-border-radius: 13px 0 0 13px;
    -webkit-border-radius: 13px 0 0 13px;
    border-radius: 13px 0 0 13px;   
    padding-left:14px;
}      

ul.tabs li.middle-tab a {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;  
    border-left:0px;   
} 

ul.tabs li.last-tab a {
    -moz-border-radius: 0 13px 13px 0;
   ...