Le tecniche mostrate sono molteplici e spesso molto differenti fra loro facendo uso a volte anche di immagini esterne per miglirare l’aspetto grafico dei bordi.

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.