Proprietà border-image

La proprietà border-image imposta un'immagine per il bordo, è una proprietà abbreviata per le proprietà border-image-source, border-image-slice, border-image-repeat, border-image-width e border-image-outset. Tuttavia, la proprietà abbreviata è apparsa in CSS prima delle proprietà abbreviate e quindi è supportata in un maggior numero di vecchi browser.

Sintassi

selettore {
	border-image: url(percorso dell'immagine) offset/spessore/offset ripetizione;
}

Descrizione

L'immagine che vogliamo applicare per il bordo deve essere formattata in modo speciale: 4 mini immagini per gli angoli e 4 immagini per i lati. Esempio di tale immagine:

In questo caso la parte centrale è lasciata bianca (poiché non vogliamo che appaia sullo sfondo dell'elemento). Esempio di immagine con la parte centrale riempita:

Il valore slice indica al browser, quali parti dell'immagine andranno agli angoli, e quali ai lati (e quale parte sarà centrale). Agli angoli vanno 4 parti, ai lati vanno 4 parti e una parte (centrale) va sullo sfondo dell'elemento (opzionalmente, parola chiave fill).

L'immagine viene "tagliata" in pezzi nel seguente modo: per il valore slice viene specificato da uno a quattro valori. Analizziamo con un esempio. Supponiamo i seguenti valori: 10 20 30 40 (i pixel px non sono specificati, ciò è dovuto al fatto che l'immagine può essere sia raster che vettoriale). I valori indicano quanto segue: 10 taglia dall'alto, 20 taglia da destra, 30 taglia dal basso, 40 taglia da sinistra. Quale parte dell'immagine andrà nell'angolo in alto a sinistra? Sarà il pezzo: 10 dall'alto, 40 da sinistra. Nell'angolo in alto a destra andrà 10 dall'alto, 20 da destra. E così via.

Spesso l'immagine è simmetrica (come i rombi sopra) e dobbiamo tagliare pezzi uguali per gli angoli. In questo caso viene specificato un valore, che imposterà offset uguali su tutti i lati. Per tagliare i rombi arancioni, specificheremo slice a 26 (poiché il rombo arancione ha dimensione 26px per 26px). I rombi gialli andranno sulle linee del bordo e succederà loro quanto segue: o si allungheranno per tutto il blocco o si ripeteranno lungo il bordo (dipende dal valore repeat):

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

La proprietà border-image non permette di specificare lo spessore del bordo dell'elemento. Il browser si limita ad allungare l'immagine lungo il bordo con la larghezza già esistente. Pertanto deve essere impostata tramite la proprietà border.

Gli utenti di browser vecchi (o con le immagini disabilitate) vedranno una cornice standard, impostata in border, quindi ha senso impostarle stile e colore appropriati.

Valori

Valore	Descrizione
url(Percorso dell'immagine)	Percorso dell'immagine. Per maggiori dettagli vedi `border-image-source`.
offset	Indica al browser quali parti dell'immagine andranno agli angoli, e quali ai lati (e quale parte sarà centrale). Valori possibili: da `1` a `4` numeri \| da `1` a `4` percentuali. Separato da spazio può essere specificata la parola chiave `fill` in aggiunta a numeri o percentuali. Per maggiori dettagli vedi `border-image-slice`.
spessore	La proprietà controlla la larghezza della parte visibile della cornice, la ridimensiona. Se questo valore è maggiore della larghezza di `border-width`, l'immagine della cornice striscia sotto il contenuto. Valori possibili: unità CSS \| percentuali \| numero \| `auto`. Per maggiori dettagli vedi `border-image-width`.
offset	Proprietà interessante, che permette di spostare la cornice oltre i limiti dell'elemento. I valori negativi non sono supportati. Valori possibili: unità CSS (eccetto % (?)) \| numero positivo \| auto. Per maggiori dettagli vedi `border-image-outset`.
ripetizione	Specifica come ripetere l'immagine sui bordi (non sugli angoli): affiancare o allungare. Valori possibili: `stretch` \| `repeat` \| `round` \| `space`. Per maggiori dettagli vedi `border-image-repeat`.

Valore predefinito: none 100%/1/0 stretch (url(percorso dell'immagine) offset/spessore/offset ripetizione).

Esempio . border-image-repeat: valore repeat

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esempio . border-image-repeat: valore stretch

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esempio . border-image-repeat: valore round

Ora nello stato normale è impostato il valore repeat, e al passaggio del mouse - round. Notate che prima del passaggio nel bordo non entra un numero intero di rombi, mentre dopo il passaggio - sì. Così funziona round:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esempio . border-image-repeat: due parole

Valore repeat per la larghezza e stretch per l'altezza:

<div id="elem"></div>

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esempio . Corrispondenza della larghezza dell'immagine con la larghezza del bordo

Aumentiamo border-width al passaggio del mouse, mantenendo lo spessore di border-image uguale. I rombi si allungheranno su tutto il bordo:

<div id="elem"></div>

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esempio . border-image-slice

Prendiamo un'altra immagine, in cui i pezzi non sono uguali:

Specifichiamo quali parti dell'immagine devono essere tagliate - 25% 30% 10% 20%. Funziona così: 25% - offset dall'alto, 30% - offset da destra, 10% - offset dal basso, 20% - offset da sinistra. In pratica, con questi pezzi tagliamo gli angoli. L'angolo in alto a sinistra sarà 25% dall'alto dell'immagine, e 20% da sinistra. L'angolo in alto a destra sarà 25% dall'alto dell'immagine, e 30% da destra e così via.

Inoltre, se passi il mouse sul blocco, verrà attivata la parola chiave fill, e la parte centrale dell'immagine diventerà lo sfondo del nostro blocco:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Esempio

Creiamo un bordo sfumato utilizzando il gradiente lineare:

<div id="elem"></div>

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Esempio . border-image-width

Impostiamo il valore border-image-width a 2 (l'immagine del bordo diventerà 2 volte più grande del bordo stesso) al passaggio del mouse sull'elemento (26/2 - specificato dopo la barra, mentre 26 - è il valore border-image-slice). Notate che il bordo stesso non è aumentato, mentre l'immagine del bordo - sì, e striscerà sotto il testo:

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esempio . border-image-outset

Impostiamo il valore border-image-outset a 3 al passaggio del mouse sull'elemento. (26/1/2 - specificato dopo la seconda barra, mentre 26 - è il valore border-image-slice, e - 1 - border-image-width):

<div id="elem"></div>

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Vedi anche

la proprietà border-image-source,
che imposta il percorso dell'immagine per il bordo
la proprietà border-image-slice,
che imposta la suddivisione dell'immagine per il bordo
la proprietà border-image-repeat,
che imposta la ripetizione dell'immagine per il bordo
la proprietà border-image-width,
che imposta la dimensione dell'immagine per il bordo
la proprietà border-image-outset,
che imposta l'offset dell'immagine per il bordo