(Ayuda) Problema Con caja-bordes redondeados.

[opzina]

El problema lo pueden observar en click aqui

Les dejo el html y el css:

html:

<div class="caja">
<div class="cajaarriba">
<div class="cajaabajo">
ContenidoContenido
ContenidoContenido
ContenidoContenido
ContenidoContenido
</div>
</div>
</div>

CSS:

.caja {
width: 300px;
background-image: url(img/cajaline.png);
background-position:center;
background-repeat: repeat-y;
}

.cajaarriba {
background-image: url(img/cajatop.png);
background-position: top center;
background-repeat: no-repeat;
}
.cajaabajo {
background-image: url(img/cajabottom.png);
background-position: bottom center;
background-repeat: no-repeat;
padding: 15px 15px 15px 15px;
}

Espero puedan darme una manito...!!!!

saludos.

[David]

El problema está en que la clase caja tiene una imagen (línea recta) como fondo que se repite verticamlmente, por lo que produce el problema que mencionas.

[opzina]

y que deberia hacer para solucionar el problema...???

yo lo saque de aca.



Saludos.

[David]

La diferencia es que en el ejemplo que mencionas están usando gif (sin transparencia), mientras que tú estás usando png, que es transparente, por lo tanto, la línea que se repite verticalmente se mostrará, ya que el borde redondeado es transparente.

[opzina]

Gracias.

Solucionado.

[lulavoy]

HOla,

el ejemplo mostrado me ha aclarado mucho unas dudas que tenia pero tengo un problema con cajas con esquinas bordeadas que no sé como solucionar.

El ejemplo mostrado antes, tenía un ancho fijo pero lo que busco necesito es que el ancho sea variable de forma que la imagen utilizada para poner arriba y abajo no me sirve.

Alguien sabe algun ejemplo donde ver como se pueden montar este tipo de cajas con esquinas bordeadas y ancho y alto variable?

Muchas gracias a todos.