Propriedade border-image-repeat

A propriedade border-image-repeat define a forma de repetição da parte interna da borda como imagem. Para informações mais detalhadas, consulte a propriedade border-image.

Sintaxe

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

Valores

Número de parâmetros	Descrição
`stretch`	Estica a imagem da borda até os tamanhos do elemento. Este valor é usado por padrão.
`repeat`	Repete a imagem da borda.
`round`	Repete a imagem e a dimensiona para que caiba um número inteiro de imagens no lado do elemento.

Valor padrão: stretch.

Número de parâmetros

Pode receber 1 ou 2 parâmetros. Se forem especificados dois parâmetros, o primeiro será para a borda superior e inferior, e o segundo parâmetro - para a esquerda e direita.

Exemplo . Valor 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;
}

Exemplo . Valor 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;
}

Exemplo . Valor round

Agora, no estado normal, está definido o valor repeat, e ao passar o mouse - round. Observe que antes de passar o mouse na borda cabe um número não inteiro de losangos, e depois de passar o mouse - um número inteiro. É assim que funciona 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;
}

Exemplo . Duas palavras

Valor repeat para a largura e stretch para a altura:

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

Veja também

a propriedade border-image,
que é uma abreviação para borda-imagem
a propriedade border-image-source,
que define o caminho da imagem para a borda
a propriedade border-image-slice,
que define o recorte da imagem para a borda
a propriedade border-image-width,
que define o tamanho da imagem para a borda
a propriedade border-image-outset,
que define o deslocamento da imagem para a borda