Draw a quarter circle and a line with css - html

Question

I need to make a box using css containing arc as shown in image . I want to do this using pure CSS. I am able to make arcs but not able to draw line. Here is my html and css code.
<style type="text/css">
.left_arc{
border-bottom: 1px solid #D0BFA6;
border-radius: 0 0 360px 0;
border-right: 1px solid #D0BFA6;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.right_arc{
border-bottom: 1px solid #D0BFA6;
border-left: 1px solid #D0BFA6;
border-radius: 0 0 0 360px;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 88px;
}
</style>
<div class="main_style">
<div class="left_arc"></div>
<div class="text_arc">Canada</div>
<div class="right_arc"></div>
</div>
Here is the output of my code.

Answer 1

LIVE DEMO
Simplify your HTML markup
and create crazy things using the CSS pseudo :before and :after selectors
HTML
<div class="main_style">
<div class="text">Canada</div>
</div>
<div class="main_style">
<div class="text">USA</div>
</div>
CSS:
.main_style {
background: none repeat scroll 0 0 #FEEEEA;
font: italic normal normal 16px/1em Times, "Times New Roman", serif;
text-transform: uppercase;
text-align:center;
letter-spacing: 1px;
color: #A29061;
position:relative;
overflow:hidden;
float: left;
}
.text{
border: 1px solid #D0BFA6;
padding:8px 20px 4px;
}
.main_style:before, .main_style:after{
content:'';
position:absolute;
top:-13px;
width:24px;
height:24px;
background:#fff;
border: 1px solid #D0BFA6;
border-radius: 42px;
}
.main_style:before{
left:-13px;
}
.main_style:after{
right:-13px;
}

Answer 2

You can just create a border with negative radius for only the top corners. See this post for more info...

Answer 3

Add extra Corner class to your left_arc and right_arc divs.
That will be shown in this JSBin.
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 100px;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.left_arc {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.right_arc {
top: -1px;
left: 110px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.main_style {
position: relative;
margin: 30px;
width: 119px;
height: 28px;
background: #ccc;
border: 1px solid #333;
}