Proprietà border-image-width

La proprietà border-image-width controlla la larghezza della parte visibile del bordo, la scala. Se questo valore è maggiore della larghezza di border-width, l'immagine del bordo striscerà sotto il contenuto.

Per informazioni più dettagliate, vedere la proprietà border-image.

Sintassi

selettore {
	border-image-width: unità CSS | percentuali | numero | auto;
}

Valori

Valore	Descrizione
Unità CSS	Valore nelle unità CSS specificate.
Percentuali	Valori in percentuale relativi alla dimensione del blocco a cui è assegnato il bordo.
Numero	Valore numerico per il quale viene moltiplicata `border-width`.
`auto`	Parola chiave. Se specificata, il valore è uguale al corrispondente `border-image-slice`. Se non c'è una dimensione adatta, viene utilizzato il valore `border-width`, in questo caso l'immagine riempie l'intero angolo del bordo, strisciando sotto il contenuto. Vedere gli esempi per una migliore comprensione.

Valore predefinito: 1.

Esempio . Numero

Impostiamo il valore di border-image-width su 2 al passaggio del mouse sull'elemento. In questo caso il bordo avrà una dimensione di 26px*2 - 2 volte più grande della sua larghezza, specificata in border-width. Il bordo in questo caso si sovrapporrà al testo (come uno sfondo):

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

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

Esempio . Cambiamo border-image-repeat in round

Nell'esempio precedente, al passaggio del mouse, nel bordo non ci sarà un numero intero di rombi. Correggiamo questo impostando border-image-repeat al valore round:

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

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

Esempio . Percentuali

Impostiamo il valore di border-image-width su 50% al passaggio del mouse sull'elemento. In questo caso il bordo avrà una dimensione di 50% rispetto alla dimensione del blocco (cioè i due bordi, destro e sinistro, copriranno l'intero blocco):

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

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

Esempio . Percentuali

Impostiamo il valore di border-image-width su 30% al passaggio del mouse sull'elemento. In questo caso il bordo avrà una dimensione di 30% rispetto alla dimensione del blocco:

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

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

Esempio . Pixel

Impostiamo il valore di border-image-width su 50px al passaggio del mouse sull'elemento:

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

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

Esempio . Valore auto

Impostiamo il valore di border-image-width su auto al passaggio del mouse sull'elemento.

Prima del passaggio del mouse, border-image-width ha valore 1 (predefinito). Nell'esempio border-width è specificatamente impostato su 52px, e border-image-slice - sul valore 26 (l'effetto con auto sarà osservato solo se border-width non è uguale a border-image-slice). A causa del fatto che border-image-width ha valore 1, l'immagine del bordo occuperà l'intera larghezza di border-width, cioè si estenderà per 52px. Al passaggio del mouse il valore di border-image-width si imposterà su auto e la larghezza dell'immagine diventerà uguale al valore di border-image-slice, cioè 26px:

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

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	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-repeat,
che ripete l'immagine per il bordo
la proprietà border-image-outset,
che specifica lo spostamento dell'immagine per il bordo