Code of the css3 rounded corner tab and the css3 rounded corner tab
<! DOCTYPE html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jQuery + css3 tab switch </title>
<Style>
* {Margin: 0; padding: 0 ;}
Body {font: 14px Georgia, serif ;}
H1 {width: 310px; 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 {float: left; position: relative ;}
. Tabs a {float: left; padding: 10px 40px; text-decoration: none; color: black; background: # ddc385;-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 {z-index: 3 ;}
. Tabs. active a {background: white; color: black ;}
. Tabs li: before,. tabs li: after,. tabs li a: before,. tabs li a: after {position: absolute; bottom: 0 ;}
. 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; z-index: 1 ;}
. Tabs li: before,. tabs li: after {background: # ddc385; width: 10px; height: 10px ;}
. Tabs li: before {left:-10px ;}
. Tabs li: after {right:-10px ;}
. Tabs li a: after ,. tabs li a: before {width: 20px; height: 20px;-webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px; background: #222; z-index: 2 ;}
. Tabs. active a: after,. tabs. active a: before {background: # ddc385 ;}
. Tabs li: first-child.active a: before,. tabs li: last-child.active a: after {background: #222 ;}
. Tabs li a: before {left:-20px ;}
. Tabs li a: after {right:-20px ;}
</Style>
<Script src = "/ajaxjs/jquery-1.6.2.min.js"> </script>
<Script>
$ (Function (){
$ ("Li"). click (function (e ){
E. preventDefault ();
$ ("Li"). removeClass ("active ");
$ (This). addClass ("active ");
});
});
</Script>
</Head>
<Body>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
<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 </Div>
</Body>
</Html>