Proprietà border-image-repeat

La proprietà border-image-repeat specifica il modo in cui viene ripetuta la parte interna del bordo rappresentata da un'immagine. Per informazioni più dettagliate fare riferimento alla proprietà border-image.

Sintassi

selettore {
	border-image-repeat: stretch | repeat | round;
}

Valori

Valore	Descrizione
`stretch`	Allunga l'immagine del bordo per adattarla alle dimensioni dell'elemento. Questo valore è quello predefinito.
`repeat`	Ripete l'immagine del bordo.
`round`	Ripete l'immagine e la ridimensiona in modo che un numero intero di immagini si adatti al lato dell'elemento.

Valore predefinito: stretch.

Numero di parametri

Può accettare 1 o 2 parametri. Se vengono specificati due parametri, il primo viene applicato ai bordi superiore e inferiore, mentre il secondo parametro viene applicato ai bordi sinistro e destro.

Esempio . Valore stretch

<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;
}

Esempio . Valore repeat

<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;
}

Esempio . Valore round

Attualmente, nello stato normale, è impostato il valore repeat, mentre al passaggio del mouse - round. Si noti che prima del passaggio del mouse nel bordo non si adatta un numero intero di rombi, mentre dopo il passaggio del mouse - sì. Ecco come funziona round:

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

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

Esempio . Due valori

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

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

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

Vedi anche

la proprietà border-image,
che è una scorciatoia per il bordo immagine
la proprietà border-image-source,
che specifica il percorso dell'immagine per il bordo
la proprietà border-image-slice,
che divide l'immagine per il bordo
la proprietà border-image-width,
che specifica la dimensione dell'immagine per il bordo
la proprietà border-image-outset,
che specifica l'offset dell'immagine per il bordo