ROUNDED TABS

by firegroove

HTML

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	
	<title>Round Out Tabs</title>
	
	<link rel='stylesheet' href='css/style.css'>
	
	<style>
    
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script>
		$(function() {
			$("li").click(function(e) {
			  e.preventDefault();
			  $("li").removeClass("active");
			  $(this).addClass("active");
			});
		});
	</script>
</head>

<body>

	<ul class="tabs group">
	  <li class="active"><a href="#one">One</a></li> 
	  <li><a href="#two">Two</a></li> 
	  <li><a href="#three">Three</a></li>
	  <li><a href="#three">Four</a></li> 
	</ul>
 
  <div id="content">
  	<h1>Round Out Tabs</h1>
  </div>
	
</body>

</html>

CSS

/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

h1 { 
	width: 660px; 
	margin: 0 auto;
	padding: 20px 0;
	color: #222;
}

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}


body { 
    	background: #222; 
    }
    #content { 
    	background: white; 
    	min-height: 400px; 
    }
    
    .tabs { 
    	list-style: none; 
    	margin: 60px auto 0; 
    	width: 660px;
    }
		.tabs li { 
		  /* Makes a horizontal row */
			float: left; 
			
			/* So the psueudo elements can be
			   abs. positioned inside */
			position: relative; 
		}
		.tabs a { 
		  /* Make them block level
		     and only as wide as they need */
		  float: left; 
		  padding: 10px 40px; 
		  text-decoration: none;
		  
		  /* Default colors */ 
		  color: black;
		  background: #ddc385; 
		  
		  /* Only round the top corners */
		  -webkit-border-top-left-radius: 15px;
		  -webkit-border-top-right-radius: 15px;
		  -moz-border-radius-topleft: 15px;
		  -moz-border-radius-topright: 15px;
		  border-top-left-radius: 15px;
		  border-top-right-radius: 15px; 
		}
		.tabs .active {
		  /* Highest, active tab is on top */
		  z-index: 3;
		}
		.tabs .active a { 
		  /* Colors when tab is active */
		  background: white; 
		  color: black; 
		}
		.tabs li:before, .tabs li:after, 
		.tabs li a:before, .tabs li a:after {
		  /* All pseudo elements are 
		     abs. positioned and on bottom */
		  position: absolute;
		  bottom: 0;
		}
		/* Only the first, last, and active
		   tabs need pseudo elements at all */
		.tabs li:last-child:after,   .tabs li:last-child a:after,
		.tabs li:first-child:before, .tabs li:first-child a:before,
		.tabs .active:after,   .tabs .active:before, 
		.tabs .active a:after, .tabs .active a:before {
		  content: "";
		}
		.tabs .active:before, .tabs .active:after {
		  background: white; 
		  
		  /* Squares...