Problema con puntas redondeadas de imagenes#

Hola amigos me estoy iniciando ene sto de la programacion, quiero que cuando mi cliente edite sus imagenes automaticamente le haga las puntas redondeadas sin tener que editar las imagenes en photoshop o algo asi, tengo el siguiente trozo de codigo:


</div>

En el estilo "bordeimagenprincipal" tengo una imagen transparente llamada puntitas.png que es la que me da el redondeo en las puntas de las imagenes, pero el problema viene cuando el segundo div el que tiene la clase del estilo deberia de caer encima del primer div el que contiene la variable de mi imagen, el problema esque siempre queda por detras de la imagen y obvio no lo hace, si alguien tiene alguna solucion para que el segundo div quede encima de mi variable por favor se lo suplico ayudenme .

Cry

---
Editado, no es necesario escribir TODO el mensaje en mayúscula.

Esto no tiene nada que ver con MODx. Creo que buscando en internet o preguntando en un foro sobre diseño web tendrás más éxito.
Esto dicho, he tenido similares experiencias: Al parecer una imagen <img> siempre estará por encima de una imagen de fondo, aunque el elemento con la imagen de fondo siga al elemento img (y por lo tanto está posicionado por encima del elemento img).
No me acuerdo bien si lo que intentas hacer se consigue con position: absolute y z-index, pero es lo que te recomendaría probar.

Si mi amigo luce como que tienes un problema de css. Realmente tendrias mas suerte si pusieras el css para ver que sucede. Si es lo que creo que esta sucediendo no creo que sea relacionado con el z-index, seria algo asi:

.wrapper {margin:0 5px; height:5px; float:left; position:relative; background: url(../images/xxx.gif) repeat-x left top; }
.isquierda {width:5px; height:5px; position:absolute; top:0; background: url(images/xxx.gif) no-repeat left top;}
.derecha {width:5px; height:5px; position:absolute; top:0; background: url(images/xxx.gif) no-repeat left top;}



</div>

Buena suerte!