Having so much trouble getting these tabs right - html

Question

I'm trying to create tabs with inverted rounded corners exactly like this with purely css3/html.
I can't seem to get it right. I've tried various solutions, even this jquery one: http://jquery.malsup.com/corner/ and I just can't get my tabs to look the way the tabs look in the image. Am I stuck having to use images?
HTML
<div class="menu">
<div class="outer_bg_left">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
<ul>
<li class="menu_item_cont"><div class="menu_item">Item 1</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 2</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 3</div></li>
</ul>
<div class="outer_bg_right">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
</div>
CSS
.outer_bg_left, .outer_bg_right {
float: left;
width: 70px;
background-color: #994;
height: 15px;
overflow: hidden;
position: relative;
z-index: 10;
}
.outer_bg_left .outer {
height: 25px;
border-radius: 0 10px 0 0;
background-color: #fff;
}
.outer_bg_right .outer {
height: 25px;
border-radius: 10px 0 0 0;
background-color: #fff;
}
.outer_bg_left .outer_shadow, .outer_bg_right .outer_shadow {
box-shadow: 0 0 5px 2px rgba(0,0,0, .7) inset;
padding-bottom: 10px;
margin-bottom: -10px;
height: 25px;
}
.outer_bg_left .outer_shadow {
border-radius: 0 10px 0 0;
padding-left: 30px;
margin-left: -30px;
}
.outer_bg_right .outer_shadow {
border-radius: 10px 0px 0 0;
padding-right: 30px;
margin-right: -30px;
}
.menu_item_cont {
background-color: #994;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 5px 2px rgba(0,0,0, .7);
background-color: #994;
display: block;
float: left;
}
.menu_item {
border-radius: 0 0 10px 10px;
background-color: #994;
height: 20px;
padding: 5px 10px;
font-family: Arial;
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.menu_item:hover {
background-color: #000;
border-radius: 10px;
height: 30px;
line-height: 30px;
color: #fff;
}

Answer 1

HTML
<ul class="tabs group">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
CSS
.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: black;
color: white;
}
.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: black;
/* Squares below circles */
z-index: 1;
}
/* Squares */
.tabs li:before, .tabs li:after {
background: #ddc385;
width: 10px;
height: 10px;
}
.tabs li:before {
left: -10px;
}
.tabs li:after {
right: -10px;
}
/* Circles */
.tabs li a:after, .tabs li a:before {
width: 20px;
height: 20px;
/* Circles are circular */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
/* Circles over squares */
z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
background: #ddc385;
}
/* First and last tabs have different
outside color needs */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
background: #fff;
}
.tabs li a:before {
left: -20px;
}
.tabs li a:after {
right: -20px;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
Fiddle http://jsfiddle.net/raunakkathuria/VLE9K/
I followed this example and modified as per you requirement http://css-tricks.com/tabs-with-round-out-borders/
You can also try this http://webdesign.about.com/od/layout/ss/css-3-tabs.htm