bordi arrotondati

[jerry6565]

Scusate ragazzi... forse qualcuno di voi sa darmi la giusta mano!

E' da qualche ora che ci smanetto ma ancora non ci sono riuscito completamente, sarà che sono quasi le 5 o qualsiasi altro problema problema... io non ci riesco !

Ho creato un foglio di stile che mi (dovrebbe) permettere di aggiungere sia bordi che angoli di un div tramite immagini png ( xke ho un background eterogeneo e non sarebbe bello vedere quelle linguette negli angoli ).

<style type="text/css">
    body {
        background: url(images/background-image.gif);
        
        font: 10px lighter Verdana, Arial, Helvetica, sans-serif;
        
        color:#D6D6D6;    
    }

    .window-top-left {
            background: url(images/window-top-left.png)top left no-repeat;
    }    
    .window-top-center {
            background: url(images/window-top-center.png)top repeat-x;

    }         
    .window-top-right {
            background: url(images/window-top-right.png)top right no-repeat;
    }
              
    .window-middle-left {
            background: url(images/window-middle-left.png)top left repeat-y;
    }
    .window-middle-right {
              background: url(images/window-middle-right.png)top right repeat-y;
    }
    .window-bottom-center {
            background: url(images/window-bottom-center.png)bottom repeat-x;
    }    
    .window-bottom-left {
            background: url(images/window-bottom-left.png)bottom left no-repeat;
    }
    .window-bottom-right {
          background: url(images/window-bottom-right.png)bottom right no-repeat;
    }
    .window-middle-left {
          background: url(images/window-middle-left.png)top left repeat-y;
    }
    .window-middle-right {
          background: url(images/window-middle-right.png)bottom right repeat-y;
    }
    
    /*div { border: 1px solid black; }*/

</style> 

il piccolo codice html sarebbe questo:

    <div class="window" style="width:300px;">
        <div class="window-top-left">
            <div class="window-top-right">
                <div class="window-top-center" style="margin-left: 13px; margin-right:13px; height:13px;"></div>
                <div class="window-middle-left" style="margin:0;">
                    <div class="window-middle-right" style="width:100%; height:100%;">
                    
                        <div style="background:#214f95;margin:0 13px 0 13px;">
                            

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tellus.  Nullam consectetuer posuere felis. Nam mollis. Ut ac nunc et eros  euismod porttitor. Mauris non ante. Curabitur enim lectus, placerat eu,  sagittis sit amet, mattis id, pede. Suspendisse ac dui. Nulla facilisi.  Sed at massa eget quam tincidunt commodo. Donec orci. </p>
                        </div>
                    
                    </div>
                </div>
            
                <div class="window-bottom-left">
                    <div class="window-bottom-right">
                        <div class="window-bottom-center" style="margin-left: 13px; margin-right:13px; height:13px;"></div>
                    </div>
                </div>        
            </div>
        </div>
     </div> 

scusate se metà css è in un file e metà nell'altro ma stavo provando continuamente!


allego il file di come si vede questa cosa in firefox in IE ancora peggio... non mostra nemmeno le immagini ed io non so proprio x quale motivo (le img sono salvata con photoshop cs3 in formato png24)



se ci sono soluzione molto piu semplic o anche sintatticamente piu corte... vi prego... fatemi sapere!