Div con angoli curvi senza immagini e Javascript

Ebbene sì, un metodo pratico, veloce e configurabile per ottenere div con angoli curvi senza immagini e senza script

I punti di forza di questa versione sono:

• Non necessita di nessun elemento aggiuntivo al codice. Solo quattro bullett (che a CSS "spenti" hanno una funzione di separatore tipografico) il cui codice HTML è tutto qui:
  <span class="lt"><b>&#8226;</b></span>
<span class="rt"><b>&#8226;</b></span>
<span class="lb"><b>&#8226;</b></span>
<span class="rb"><b>&#8226;</b></span>
• Non necessita di immagini per creare gli angoli.
• Non necessita di inserimento di js. Questa soluzione è in puro CSS.
• Altamente configurabile. È infatti possibile modificare la curvatura dell'arco dell'angolo intervenendo sui diversi valori CSS (vedi codice CSS sotto).
• Permettono l'effetto cornice 3d. Vedi l'esempio qui sotto.
• Cross browser. Funziona su tutti i browser (Win e Mac) in circolazione: Opera, Firefox, IE, Safari, Camino.
• XHTML Strict validato. Provare per credere.

Mostra l'HTML e i CSS di questo div
Nascondi il box con l'HTML e i CSS

 
<div class="div1">
 <h3>Titolo (facoltativo)</h3>
 <p>Paragrafo (facoltativo)</p>
 <span class="lt"><b>&#8226;</b></span>
 <span class="rt"><b>&#8226;</b></span>
 <span class="lb"><b>&#8226;</b></span>
 <span class="rb"><b>&#8226;</b></span>
</div>

 
 
/*Stili del DIV a cui applicare gli angoli tondi*/ 
.div1 {
 margin:0 0 10px 0;
 padding:0;
 width:60%;
 position:relative;
 background-color:DarkSeaGreen; 
}
 
.div1 h3 { 
 position:relative;
 z-index:12;
 padding:8px;
}
 
.div1 p {
 margin:5px 0;
 padding: 10px;
}
 
 
/*Stili applicati ai tag span che contengono i bullet*/ 
 
.div1 .lt, .div1 .lb, .div1 .rt, .div1 .rb {
 position:absolute;
 width:15px;
 height:15px;
 background-color:#fff;
 overflow:hidden;
 display:block;
 z-index:1;
}
 
.div1 .lt {
 left:0;
 top:0;
}
 
.div1 .rt {
 right:0!important;
 right:-1px; /*fix per IE6 o inferiore*/ 
 top:0;
}
 
.div1 .lb {
 left:0;
 bottom:0;
}
 
.div1 .rb {
 right:0!important;
 right:-1px; /*fix per IE6 o inferiore*/ 
 bottom:0;
}
 
 
/*Stili applicati ai tag b dei bullet*/ 
 
.div1 .lt b, .div1 .lb b, .div1 .rt b, .div1 .rb b {
 font-size:105px; /*questo parametro, in combinazione 
con i margini dei b (vedi sotto), determina la curvatura 
dell'arco dell'angolo*/ 
 color: DarkSeaGreen;
 font-family:"Trebuchet MS";
 display:block;
 cursor:default;
 line-height:130px; /*necessario per Safari*/ 
}
 
.div1 .lt b {
 margin-top:-57px;
 margin-left:-12px; 
}
 
.div1 .lb b {
 margin-top:-74px;
 margin-left:-12px;
}
 
.div1 .rt b {
 margin-top:-57px;
 margin-left:-29px;
}
 
.div1 .rb b {
 margin-top:-74px;
 margin-left:-29px;
}

È possibile anche ottenere un effetto cornice 3d come questo

Basta giocare con i bordi del titolo e del paragrafo (o di altri elementi contenuti nel div).
Mostra i CSS di questo div
Nascondi il box con i CSS

 
 
/*Stili del DIV a cui applicare gli angoli tondi*/ 
.div2 {
 position:relative;
 margin:10px 0;
 padding:6px 0;
 width:450px!important;
 width:451px; /*IE 6 necessita di 1px in più*/ 
 background-color:IndianRed;
 color:#601e13 
}
 
.div2 h3 { 
 position:relative;
 z-index:12;
 width:422px;
 margin:0 auto;
 padding:5px;
 background-color:#ef7a78;
 border-top:#601e13 2px solid;
 border-left:#974e3e 2px solid;
 border-right:#ff8c89 2px solid;
}
 
.div2 p {
 width:412px;
 margin:0 auto;
 background-color:#ef7a78;
 border-left:#974e3e 2px solid;
 border-right:#ff8c89 2px solid;
 border-bottom:#ffaca8 2px solid;
 position:relative;
 z-index:30;
 padding:10px;
}
 
.no-border {
 border-bottom:0!important
}
 
 
/*Stili applicati ai tag span che contengono i bullet*/ 
 
.div2 .lt, .div2 .lb, .div2 .rt, .div2 .rb { 
 position:absolute;
 width:10px;
 height:10px;
 background-color:#fff;
 overflow:hidden;
 display:block;
 z-index:1;
}
 
.div2 .lt {
 left:0;
 top:0;
}
 
.div2 .rt {
 right:0!important;
 right:-1px; /*fix per IE6 o inferiore*/ 
 top:0;
}
 
.div2 .lb {
 left:0;
 bottom:0;
}
 
.div2 .rb {
 right:0!important;
 right:-1px; /*fix per IE6 o inferiore*/ 
 bottom:0;
}
 
 
/*Stili applicati ai tag b dei bullet*/ 
 
.div2 .lt b, .div2 .lb b, .div2 .rt b, .div2 .rb b {
 font-size:85px; /*questo parametro, in combinazione 
con i margini dei b (vedi sotto), determina la curvatura 
dell'arco dell'angolo*/ 
 color: IndianRed;
 font-family:"Trebuchet MS";
 display:block;
 cursor:default;
 line-height:130px; /*necessario per Safari*/ 
}
 
.div2 .lt b {
 margin-top:-59px;
 margin-left:-10px; 
}
 
.div2 .lb b {
 margin-top:-73px;
 margin-left:-10px;
}
 
.div2 .rt b {
 margin-top:-59px;
 margin-left:-25px;
}
 
.div2 .rb b {
 margin-top:-73px;
 margin-left:-25px;
}

Ovviamente le possibilità di personalizzazione sono virtualmente infinite, sta tutto alla fantasia e alla capacità dello sviluppatore.