Una delle esigenze più comuni in questo web 2.0 è quella di arrotondare un po tutto. Creare box con angoli arrotondati, quindi, permette di dimenticare quel tipo di grafica squadrata – tipica dei design tabellari – cui il web ci ha abituato sin dalle sue origini.

Le forme piu libere infatti creano effetti visivi gradevoli e decisamente piu “soft” rappresentando una soluzione semplice ma davvero efficace per mettere in risalto determinate aree della nostra pagina web.

Per prima cosa ci serve un box da tagliare. Per crearlo userò Photoshop ma va bene qualsiasi programma di grafica.

Il box creato con il programma di grafica

Vediamo dunque come utilizzare i CSS per un box con angoli arrotondati.

Come si può ben vedere niente di trascendentale. E’ un semplice box azzurro con il bordo di un colore piu scuro. Fatto questo ci basterà con delle sezioni utente di Adobe Photoshop creare tre immagini che raffigurino il lato superiore, inferiore e mediano. Vediamo come:

alto.gif

medio.gif

basso.gif

I file sopra li chiamaremo alto.gif, medio.gif e basso.gif.
Vediamo ora il codice CSS per creare il nostro box ad effetto:

div.box-alto
{
  width: 

300px;
  background-image: url('alto.gif');
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 20px;
}
div.box-medio
{
  width: 300px;
  background-image: url

('medio.gif');
  background-repeat: repeat-y;
}
div.box-basso
{
  width: 300px;
  background-image: url('basso.gif');
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-

bottom: 20px;
}
div.box-testo
{
  margin: 0px 10px 0px 10px;
}

Mentre nel codice della nostra pagina HTML scriveremo:

<div class="box-alto">
  <div class="box-basso">

<div class="box-medio">
      <div class="box-testo">
      Scrivi qui il tuo testo...
      </div>
    </div>
  </div>
</div>

Facile Vero? Abbiamo detto all’HTML di utilizzare quelle immegini per visualizzare il suo DIV con gli angoli arrotondati. Tutto questo in attesa dei CSS 3 e del finale adeguamento dei browser microsoft alle specifiche CSS.