La tecnica dei box con angoli arrotondati non è certo una novità, basti pensare all’ottima procedura creata da Dan Cederholm, che ha permesso di ottenere box “morbidi” con facilità in un momento in cui sul web erano cool.

La tecnica di Cederholm presenta però una limitazione: il box risulta rigido. Questo perché basato sull’utilizzo di due immagini di dimensioni fisse per rendere gli angoli del box; c’è da dice che comunque questa tecnica è ottima per generare box arrotondati di dimensione fissa a cui si può facilmente modificare il colore di sfondo.

La metodica qui proposta cerca di risolvere questa piccola sbavatura, impiegando sempre delle immagini per ottenere gli angoli, ma questa volta il box sarà liquido.

Struttura

Per prima cosa dobbiamo costruire la struttura del nostro box, ma questo sarà estremamente semplice, infatti per seguire un ordine logico ho pensato di generare quattro div che avranno ognuno rispettivamente il compito di posizionare i quattro diversi angoli.

Per una questione di puro concetto ho pensato di fare un esempio nudo con il vari div che compongono la struttura evidenziati e chiariti.

Iniziamo con il div che si comporterà da contenitore del box, questo avrà il compito di posizionare l’angolo in alto a sinistra, questa scelta è del tutto arbitraria e se preferite si può modificare a vostro piacimento.

#mainContent{
  margin-top: 3px;
  background:url("corner_top_left.gif") top left no-repeat;
  background-color:#dadada;
  width: 99%;
  margin-left: 5px;
  clear: both;
}

Come visto nell’esempio schematico, questo div#mainContent costituisce la vera e propria struttura del box, e inoltre permette il posizionamento dell’angolo superiore sinistro.

Il successivo div da creare è quello che posiziona l’angolo superiore destro, questo verrà fatto dal div#bodyText, di questo vi è anche il controllo sugli elementi <p> in quanto è all’interno di questo preciso div che andrà a finire l’eventuale testo del box.

#bodyText{
  background:url("corner_top_right.gif") top right no-repeat;
  text-align:left;
  padding: 5px 8px;
}
#bodyText p{
  margin: 3px 5px;
  padding: 5px;
  font-size: 85%;
}

Il terzo div da scrivere è già da includere nel piede del box, infatti questo posizionerà l’angolo inferiore sinistro e prenderà il nome di div#contentBottom.

#contentBottom{
  background:url("corner_bottom_left.gif") bottom left no-repeat;
  background-color:#dadada;
}

Per finire ci manca l’angolo inferiore destro e questo compito verrà assegnato al div#innerBottom

#innerBottom {
  background:url("corner_bottom_right.gif") bottom right no-repeat;
}

Arrivati a questo punto il nostro foglio di stile è pronto per generare un box fluido con bordi arrotondati, l’ultimo passaggio da effettuare è quello di scrivere correttamente il codice XHTML

<div id="mainContent">
 <div id="bodyText">
 <p>Lorem ipsum dolor etc …</p>
 </div>
 <div id="contentBottom">
  <div id="innerBottom">&nbsp;</div><!-- end #innerBottom -->
 </div><!-- end #contentBottom -->
</div><!-- end #mainContent -->

Conclusioni

Questa tecnica ci permette di ottenere la fluidità del box ad un eventuale aumento delle dimensioni del testo, ma presenta la limitazione legata al fatto che se volessimo cambiare colore di sfondo dovremmo per forza lavorare con un software di grafica e modificare il colore delle immagini che generano gli angoli del box; purtroppo non si può avere tutto.

Inoltre è curioso pensare che il comportamento degli angoli arrotondati di un box si può facilmente ottenere con i ‘border-radius’ dei CSS3, ma questi vengono per ora supportati solamente dai browser più recenti.