Ayuda con css para bordes redondeados de menu

[aptile]

Tengo el siguiente problema con mi menu:


Me gustaria que el div marcado en azul estuviera abajo de los 3 de superiores que son los que me hacen el borde.


mi codigo es el siguiente con el hago los bordes.
HTML:
<div class="menu_caja">
<div class="menu_caja_i_s"></div>
<div class="menu_caja_c_s"></div>
<div class="menu_caja_d_s"></div>
<div class="menu_contenido"></div>
<div class="menu_caja_i_i"></div>
<div class="menu_caja_c_i"></div>
<div class="menu_caja_d_i"></div>
</div>

CSS:
/************************************************** ************************************************** **************************************
CAJA DE MENU
************************************************** ************************************************** **************************************/
div.menu_caja{
width:999px;
height:46px;
background-image:url(../images/bgr_menu.jpg);
}

div.menu_caja_i_s{
width:7px;
height:7px;
background-image:url(../images/i_s_nb.png);
float:left;
}
div.menu_caja_d_s{
width:7px;
height:7px;
background-image:url(../images/d_s_nb.png);
float:right;
}
div.menu_caja_c_s{
width:985px;
height:7px;
float:left;
}
div.menu_caja_i_i{
width:7px;
height:7px;
background-image:url(../images/i_i_nb.png);
float:left;
}
div.menu_caja_d_i{
width:7px;
height:7px;
background-image:url(../images/d_i_nb.png);
float:right;
}
div.menu_caja_c_i{
width:985px;
height:7px;
float:left;
}
div.menu_contenido{
width:999px;
height:32px;
}

Bueno se que ahy muchos post referentes a lo mismo pero por un asunto de aprendizaje estoy trabjando desde 0.

[a77icu5]

puedes probar dejando la caja de contenido con una posicion relativa [position: relative; ] y luego poner los divs que forman los bordes redondos con posicion absoluta [position: absolute;] con esto tendras la oportunidad de posicionarlos usando las propiedates top, left, right y bottom segun sea el caso....suerte !