Proprietà border-image CSS

Definizione e uso

L'attributo border-image è un attributo di abbreviazione che imposta i seguenti attributi:

Se il valore è omesso, viene impostato il valore predefinito.

Suggerimento:Usa l'attributo border-image-* per costruire pulsanti flessibili e belli!

Vedi anche:

Tutorial CSS3:Bordi CSS3

Esempio

Riguarda l'immagine come bordo dell'elemento div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Prova da solo

Ci sono altri esempi in fondo alla pagina.

Sintassi CSS

border-image: source slice width outset repeat|initial|inherit;

Valore dell'attributo

Valore Descrizione Test
border-image-source Il percorso dell'immagine utilizzata nel bordo.
border-image-slice Spostamento dell'immagine di bordo verso l'interno.
border-image-width Larghezza del bordo dell'immagine.
border-image-outset La quantità di immagine di bordo che supera il bordo.
border-image-repeat Se l'immagine di bordo deve essere ripetuta (repeated), arrotondata (rounded) o stirata (stretched). Test

Dettagli tecnici

Valore predefinito: nessuna 100% 1 0 stretch
Ereditarietà: no
Versione: CSS3
Sintassi JavaScript: object.style.borderImage="url(border.png) 30 30 round"

Altri esempi

Pulsante Border-image
Questo esempio dimostra come creare un pulsante utilizzando l'attributo border-image.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-