<div id="curly-brace">
<div id="left" class="brace"></div>
<div id="right" class="brace"></div>
</div>
body
{
background-color: #39F;
color: #FF3;
}
#curly-brace
{
width: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 150px;
}
.brace
{
border-bottom: 5px solid;
margin: 0 10%;
width: 30%;
height: 20px;
float: left;
}
.brace:before,
.brace:after
{
content: "";
width: 10%;
height: 50px;
position: absolute;
display: block;
}
#left:before
{
border-bottom: 5px solid;
border-bottom-left-radius: 20px;
margin-left: -10%;
margin-top: -30px;
}
#left:after
{
border-top: 5px solid;
border-top-right-radius: 20px;
margin-left: 30%;
margin-top: 20px;
}
#right:before
{
border-top: 5px solid;
border-top-left-radius: 20px;
margin-left: -10%;
margin-top: 20px;
}
#right:after
{
border-bottom: 5px solid;
border-bottom-right-radius: 20px;
margin-left: 30%;
margin-top: -30px;
}
Also see: Tab Triggers