CSS: background de caja en 3 capas

[vyrphan]

Hola compañeros,

tengo un pequeño problema al realizar la maquetación de una caja. Se trata de un envoltorio, en 3 capas, para crear un borde redondeado, envolviendo el contenido.

Las cajas son:

Código HTML:

div class="bg_middle">
  <div class="bg_top">
    <div class="bg_bottom">
...
    </div>
  </div>
</div> 

y el css asociado es el siguiente

Código:

.bg_top{
    background: url('/static/media/images/app/boxes/upper.png') no-repeat left top;
}

.bg_middle{
    background: transparent url('/static/media/images/app/boxes/middle.png') repeat-y left top;
}

.bg_bottom{
    background: url('/static/media/images/app/boxes/bottom.png') no-repeat left bottom;
    padding: 15px 30px 20px 30px;
}

donde upper y bottom son la cabecera y el pie de la caja, con sus bordes, y middle es unicamente una imagen con dos bordes personalizados a derecha e izquierda, y que quiero que se replique a lo alto, para cerrar las caras izquierda y derecha.

Pues bien, mi problema es con la middle.png. Todas las imagenes tienen el fondo transparente, pero el montaje acaba desastroso porque middle.png se me replica de arriba a abajo, traspasando los bordes de las otras dos imagenes.

He probado a trasladar la capa .bg_middle por debajo de las otras dos, pero el resultado es aun peor: sobrepasa las otras dos imagenes, y ya no se ven ni los bordes.

Algun consejo acerca de que estoy haciendo mal?

PD: los bordes son redondeados. Dejo una imagen del resultado final a continuación

[webfreelance]

Porque no pruebas con CSS3? es mucho mas fácil. Aquí te dejo un enlace:

http://craftyman.net/bordes-redondeados-con-css3-para-todos-los-navegadores/

Saludos

[vyrphan]

gracias por la respuesta webfreelance, pero el tema es que los bordes redondeados forman parte de un diseño personalizado de la web.
Necesito que funcione con estas 3 imagenes que forman el exterior de la caja. He visto tutoriales en los que parece facil, y no veo que punto de error puede tener mi diseño para que no cuadre.

Un saludo

[IsaBelM]

prueba con esta estructura

<div> <--! contenedor -->
<div></div> <!-- borde superior -->
<div> <!-- borde central -->

<p> <!-- contenido --></p>

</div> <!-- / borde central -->
<div></div> <!-- borde inferior -->
</div> <!-- /contenedor -->

[vyrphan]

Gracias Isabel, esa si fue una solución viable. He tenido que retocar margins y paddings para que cuadre, y añadir otra capa interior para que cuadre todo, pero la figura se ve correctamente.

Un saludo