Border-Image CSS

La proprietà dei CSS border-image consente di inserire un'immagine ai quattro lati del tag div ottenendo così una grafica personalizzata senza ricorrere ad altri programmi di grafica.

Faccio un pratico esempio abbastanza semplice da interpretare.
Partendo da un'immagine realizzata con Fireworks 81x81:

creiamo una pagina html con il seguente contenitore:

Codice HTML

 <div class="nomeclasse"></div>

al quale applichiamo le seguenti regole CSS:

Codice CSS

 .nomeclasse {
  margin: auto;
  height: 300px;
  width: 500px;
  padding: 10px;
  border: 27px solid black;
  border-image: url(border.png) 27 27 27 27 round round;
}

quando si usa la proprietà border-image bisogna sempre definire il bordo dell'elemento mediante la consueta regola border che in questo caso è 27px che corrisponde alla larghezza dei rombi contenuti nell'immagine precedente realizzata con Fireworks, alla proprietà border-image specifichiamo l'url dell'immagine border.png, 27 27 27 27 corrispondono alla larghezza del bordo, vediamo a cosa corrispondono questi 27. Prendiamo in considerazione l'ammagine realizzata in precedenza e suddividiamola in quadranti:

i quattro 27 stabiliscono quali parti dell'immagine usare sul contenitore nelle posizioni 1, 3, 9, 7, ovvero i quattro angoli.

• - Il primo 27 significa "Usa per l'angolo superiore sinistro 1 la parte corrispondente dell'immagine alta 27px";
• - il secondo 27 "Usa per l'angolo superiore destro 3 la parte corrispondente dell'immagine larga 27px";
• - il terzo 27 "Usa per l'angolo inferiore destro 9 la parte corrispondente dell'immagine alta 27px";
• - il quarto 27: "Usa per l'angolo inferiore sinistro 7 la parte corrispondente dell'immagine larga 27px";

round è la parola chiave che definisce il comportamento dell'immagine sui lati, il primo round definisce il comportamento dell'immagine sui lati superiore, inferiore e centrale, in senso orizzontale (sono le sezioni 2 5 e 8), il secondo round opera sulle sezioni 4, 5 e 6, in senso verticale, round significa che quella parte dell'immagine va ripetuta, in alternativa si può usare la parola chiave stretch che non fa ripetere l'immagine ma la "stira":

Codice CSS

 .nomeclasse {
  margin: auto;
  height: 300px;
  width: 500px;
  padding: 10px;
  border: 27px solid black;
  border-image: url(border.png) 27 27 27 27 stretch stretch;
}

Per utilizzare la proprietà border-image con i browser Chrome e Mozilla Firefox bisogna usare i soliti prefissi -webkit- e -moz- rispettivamente, Opera supparta la proprietà nella sua forma standard, si ottiene così il risultato:

Codice CSS

 .nomeclasse {
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 10px;
  border: 27px solid black;
  -webkit-border-image: url(border.png) 27 27 27 27 stretch stretch;
  -moz-border-image: url(border.png) 27 27 27 27 stretch stretch;
  border-image: url(border.png) 27 27 27 27 stretch stretch;
}

nel caso si usa la chiave stretch, 

Codice CSS

 .nomeclasse {
  margin: auto;
  height: 170px;
  width: 270px;
  padding: 10px;
  border: 27px solid black;
  -webkit-border-image: url(border.png) 27 27 27 27 round round;
  -moz-border-image: url(border.png) 27 27 27 27 round round;
  border-image: url(border.png) 27 27 27 27 round round;
}

nel caso si usa la chiave round.

Demo