Problema CSS nei widget con sfondo sfumato

[max299]

Salve ragazzi,
cercherò di esporre il mio problema in maniera più chiara possibile:

Sto modificando un template wordpress. L'originale era costituito da un unico colore, io l'ho modificato mettendo un'immagine sfumata utilizzando la funzione "repeat-y".

Il problema nasce con gli angoli arrontondati. ho modificato le immagini rendendo lo sfondo trasparente in modo che qualsiasi sia lo sfondo sottostante gli angoli rotondi non interferiscano.

Ora arriva il problema. I widget sono impostati in questo modo:

<div class="box_a" id="widget_S">      
<h2>Sottoscrivi<a href="#minimize" class="Sminimize"></a><a href="#close" class="Sclose"></a></h2>
<div>      
<p>Sottoscrivi i nostri <strong>Feed RSS</strong> o inserisci di seguito il tuo indirizzo <strong>e-mail</strong> per ricevere news e aggiornamenti.</p>     
<p><a href="<?php bloginfo('rss2_url'); ?>" id="feedlink">Sottoscrivi Feed RSS articoli</a>     
<form id="feedform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?=$comfy['feed_name']?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">     
<fieldset>     
<input type="text" id="feedemail" name="email" value="Inserisci la tua E-mail..." />     
<input type="hidden" value="<?=$comfy['feed_name']?>" name="uri"/>     
<input type="hidden" name="loc" value="en_US"/>     
<input type="submit" id="feedbutton" value="" />     
</fieldset>     
</form>     
</p>          
</div>  

<span class="foot"></span> </div>

mentre questo è il CSS relativo:

/* box A */ 
.box_a { 	
display: none; 	
margin: 10px 0 0 0; 	
background: url(img/box_rp.png) repeat-y; 	
overflow: hidden; 
}  

.box_a h2 { 	
display: block; 	
width: 294px; 	
height: 17px; 	
background: url(img/box_h.png) no-repeat top; 	
padding: 7px 0 0 30px; 
border-bottom: 1px dotted #ddd; 	
overflow: hidden; 	
position: relative; 
} 

.box_a div { 	
display: block; 	
padding: 0 10px 0 10px; 
}  

.box_a p { 	
line-height: 1.3em; 	
color: #999; 	
margin: 10px 0 0 0; 
}  

.box_a em { 	
color: #999; 
}  
span.foot { 	
display: block; 	
width: 324px; 	
height: 14px; 	
background: url(img/box_f.png) no-repeat bottom; 
}

il problema è che l'immagine denominata "box_rp.png" (si tratta di una linea alta 1px che si ripete sulla y) sovrasta anche la zona degli angoli smussati, rendendo inutile il mio lavoro.

Vi posto un'immagine per avere ancora più chiaro il concetto: