Pure CSS Rounded Tab Navigation

HTML

<ul id="top-nav" class="top-nav clearfix">
	<li class="current"><a href="http://cq.soultao.com/">Home</a></li>
	<li><a href="http://cq.soultao.com/cmph/">Blog</a></li>
	<li><a href="http://cq.soultao.com/uppmt/">Tools</a></li>
	<li><a href="http://cq.soultao.com/epdt/">Docs</a></li>
	<li><a href="http://cq.soultao.com/hbmmfsz/">Gallery</a></li>
	<li><a href="http://cq.soultao.com/sfdpse/">Record</a></li>
	<li><a href="http://cq.soultao.com/bcpvu/">About</a></li>
</ul>	
	

CSS

.clearfix:after{clear:both;content:"\200B";display:block;height:0;}
.clearfix{*zoom:1;}
.top-nav{margin:0;list-style:none;border-bottom:1px solid #ccc;padding-bottom:4px;position:relative;}
.top-nav li{float:left;position:relative;margin-right:8px;padding:0 1px;}
.top-nav li.current:after{content:"\200B";position:absolute;display:block;width:100%;left:0;bottom:-5px;border-bottom:1px solid #fff;}
.top-nav li a{display:block;position:relative;border:1px solid #ccc;border-bottom:0 none;padding:5px 5px 0 5px;text-decoration:none;border-top-left-radius:4px;border-top-right-radius:4px;}
.top-nav li a:before{content:"\200B";position:absolute;display:block;width:4px;height:100%;border-bottom-right-radius:4px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;left:-5px;top:4px;}
.top-nav li a:after{content:"\200B";position:absolute;display:block;width:4px;height:100%;border-bottom-left-radius:4px;border-bottom:1px solid #ccc;border-left:1px solid #ccc;right:-5px;top:4px;}	
	

Script

$('#top-nav li').bind('click',function(){
	$(this).siblings('.current').removeClass('current');
	$(this).addClass('current');
	return false;
});
	

Compatibility

IE8(fall back to right angle), and All modern browser

dislocation in IE7-