con photoshop ti disegni la grafica poi nel tuo div metti in alto e in basso i tuoi pezzi di img con gli angoli tondi...

oppure usi questo codice:

CODICE CSS
span.rtop, span.rbottom{display: block; }
span.rtop span, span.rbottom span{display: block; height: 1px;
overflow: hidden;
background-color: #FFF;}
span.r1{margin: 0 5px}
span.r2{margin: 0 3px}
span.r3{margin: 0 2px}
span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}

CODICE PAGINA
<span class="rtop"> <span class="r1"></span> <span class="r2"></span>
<span class="r3"></span> <span class="r4"></span> </span>
<p class="rcentro"></p>
<span class="rbottom"> <span class="r4"></span> <span class="r3"></span>
<span class="r2"></span> <span class="r1"></span> </span> </div>

Così funziona se hai un colore di background e non un bordo.

Grazie mille Mr.who

Puoi usare gia quelle specifiche css3, ma funzioneranno solo su Mozilla e Webkit. Ovviamente però il tuo CSS non sarà validato.

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

grazie del consiglio, tantovale aspettare allora
grazie

@8enrico4 said:

Salve a tutti.
Vorrei creare un contenitore #div Css per circondare e corniciare il layout del mio sito, ma non so come fare per rendere arrotondati gli angoli, qualcuno mi puo` consigliare come fare?
grazie in anticipo
saluti

Esistono diverse soluzioni che fanno ricorso all'uso delle immagini di sfondo.
La più gretta è quella di annidiare 4 div e mettere ad ognuna come sfondo un angolo arrotondato, posizionato di conseguenza.

Soluzioni più pratiche ce ne sono, alcune ricorrono a javascript per non appesantire il markup, come i nifty corners:
http://www.html.it/articoli/niftycube/index.html

In ogni caso la soluzione giusta dipende dal tipo di box che ti serve, se è fisso o liquido e da cosa andrà a contenere.

Ciao io ho usato questo, senza usare immagini di sfondo, ma solo codice html e css.

codice HTML

[html]<div class="contenitore">
<span class="curva segmento1"></span>
<span class="curva segmento2"></span>
<span class="curva segmento3"></span>
<span class="curva segmento4"></span>
<div class="curva contenuto">

        contenuto               
     
    </div>
  <span class="curva segmento4"></span>

<span class="curva segmento3"></span>
<span class="curva segmento2"></span>
<span class="curva segmento1"></span> </div>[/html]Codice CSS

.curva {
    display:block;     height: 1px; overflow: hidden;      background: #ccffff;
}

.segmento1{ margin: 0 5px }

.segmento2{    margin: 0 3px }

.segmento3{    margin: 0 2px}

.segmento4{    margin: 0 1px;    height: 2px;}

.contenuto {
       height: auto;
       padding: 1px 10px;
}

Bello! Grazie per l'utilissimo codice! Peccato che se devo fare 10 box in un stessa pagina viene fuori un codice html lunghissimo, che influisce negativamente anceh sul posizionameno...

MHhh io personalmente non amo usare così tanto lo span per annidamenti dato che di base lo spam è affibiato a tutt'altro genere.

Consiglierei di prendere in considerazione l'uso dei div piuttosto
Ma è un mio personale parere.
ciao!

Cosa intendi con spam? E con div che tecnica intedi?

...il tag span

Si scusate errore mio di battitura , era "span" non spam.

Immaginavo, ma lo aveva scritto 2-3 volte!:)

io mi sono trovato molto bene con questi consigli firmati cssplay:
www.cssplay.co.uk/boxes/, nello specifico
www.cssplay.co.uk/boxes/snazzy2.html
www.cssplay.co.uk/boxes/krazy.html
www.cssplay.co.uk/boxes/chunky.html
www.cssplay.co.uk/boxes/slant.html
www.cssplay.co.uk/boxes/curves.html
tutte le soluzioni proposte non fanno uso né di javascript né di immagini, solo xhtml e css puri! buon lavoro!!

edit: dimenticavo che al limite esiste un plugin per jquery:
( - methvin.com/jquery/jq-corner.html
http://methvin.com/jquery/jq-corner-demo.html)

Non male i link sopra! Grazie!

penso che dovrebbero impiccare i programmatori del browser i.e, faro` un layout con photoshop, e il resto lo metto dentro usando le posizioni assolute MI ARRENDO.
Grazie cmq per l'aiuto e i consigli