CSS3 tabs

Css3 tabs with faux inverted rounded corners.

by jamessouth

HTML

<ul>
    <li><a href="#"><span>testing</span></a></li>
    <li><a href="#"><span>testing</span></a></li>
    <li><a href="#"><span>testing</span></a></li>
</ul>

CSS

body{
    background:#fff;
    font-family:Arial;
}

ul{
    margin:50px;
    list-style:none;
    border-bottom: solid 1px #808080;
    padding-left:5px;
}

ul li{
    display:inline-block;
    margin-right:15px;
}

a{
    position:relative;
    display:block;
    max-width:200px;
    min-width:100px;
    height:26px;
    overflow:visible;
    text-align:center;
    text-decoration:none;
}

a span{
    max-width:200px;
    min-width:100px;
    height:26px;
    overflow:hidden;
    display:block;
    background:#808080;
    border-radius:5px 5px 0 0;
    color:#fff;
    line-height:26px;
}

a:before,
a:after {
       content:'';
       display: block;
       width: 5px; height: 5px;
       position:absolute;
       top:21px;
       right: -5px;
   }    
   
a:before {background: #808080;}
a:after {
      background: #fff;
      border-radius-bottomleft: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-left-radius: 5px;
}


a span:before,
a span:after {
       content:'';
       display: block;
       width: 5px; height: 5px;
       position:absolute;
       top:21px;
       left: -5px;
   }    
   
a span:before {background: #808080;}
a span:after {
      background: #fff;
      border-radius-bottomright: 5px;
      border-bottom-right-radius: 5px;
      border-bottom-right-radius: 5px;
   }