background-image e posizionameno

[endorama]

background-image e posizionameno

Salve a tutti! In questi giorni mi sto dando da fare per fare un sito, ma ho un problema dal quale non riesco proprio a uscire.
Allora, una pagina del sito dovrebbe visualizzare una classifica, formata da
"nome" e a capo il risultato ottenuto, sotto forma di una barra colorata con all'estremità destra il numero di punti effettuati.

Fin qui piuttosto semplice, è bastato un

ul#csschart span.type2 {
    background:url(../img/type2-90_2.png) repeat-x;
}

```Ora il mio problema è un'altro. Poichè con questo sistema i bordi dell'immagine risultano "piatti", cioè la barra si rivela un rettangolo con gli angoli vivi, volevo riuscire a piazzarli due immagini ai lati con gli angoli smussai, in modo da ottenere una barra con la forma di un rettangolo arrotondato. Questo non succede, e la l'immagine in questione sovrascrive le altre due che io posiziono, risultando così sto fastidioso rettangolo non arrotndato. Inoltre il problema è che questa barra è dinamica, varia in base ai punteggi conseguiti, e quindi l'idea di fare 100 immagini diverse per rappresentare le varie percentuali ottenute è folle!
Volevo un metodo per posizionare due immagini ai lati di quella centrale che è in "repeat-x", riuscendo però a visualizzarle!

Ecco le parti di codice incriminate:
**Pagina HTML**
[html]
<ul id="csschart">
                <li>
                    Band 1
<!-- l'idea di inserire gli span annidati mi è venuta vedendo un altro sito che applicava questo concetto verticalmente. Purtroppo qui non funziona! -->
                    <span>
                        <span class="type1 p100">
                                <span></span>
                                <em>50</em>
                        </span>    
                    </span>
                    
                </li>
</ul>
[/html]
**CSS associato**

ul#csschart li span {
background: transparent url(../img/type1-90_left.png) no-repeat scroll top left;

}
ul#csschart li span span {
display:block;

z-index:1;
text-decoration:none;

height: 16px;
//padding-top: 1px;
//margin-left: 10px;

}
ul#csschart li span span span {
background: transparent url(../img/type1-90_right.png) no-repeat scroll top right;
}

/* column types */            

ul#csschart .type1 {
background: url(../img/type1-90_2.png) repeat-x;
}

ul#csschart span.type2 {
background:url(../img/type2-90_2.png) repeat-x;
}

ul#csschart span.type3 {
background:url(../img/type3-90_2.png) repeat-x;
}

ul#csschart span.type4{
background:url(../img/type4-90_2.png) repeat-x;
}

/* e poi ci sono 100 classi diverse che rappresentano le varie percentuali secondo questo schema: p"valore percentuale" = width:valore percentuale*/
ul#csschart span.p0{width:0%;}
ul#csschart span.p1{width:1%;}
.
.
.
ul#csschart span.p100{width:100%;}

grazie