Propriedade border-image

A propriedade border-image define uma imagem para a borda, sendo uma propriedade abreviada para as propriedades border-image-source, border-image-slice, border-image-repeat, border-image-width e border-image-outset. A propriedade abreviada apareceu no CSS antes das propriedades individuais e, portanto, é suportada em um número maior de navegadores antigos.

Sintaxe

seletor {
	border-image: url(caminho para a imagem) deslocamento/espessura/extensão repetição;
}

Descrição

A imagem que queremos aplicar para a borda deve ser formatada de uma maneira especial: 4 mini imagens para os cantos e 4 imagens para os lados. Exemplo de tal imagem:

Neste caso, a parte central foi deixada branca (pois não queremos que ela apareça no fundo do elemento). Exemplo de imagem com a parte central preenchida:

O valor slice indica ao navegador quais partes da imagem serão usadas para os cantos, e quais para os lados (e qual parte será a central). Para os cantos vão 4 partes, para os lados vão 4 partes e uma parte (a central) vai para o fundo do elemento (opcionalmente, palavra-chave fill).

A imagem é "cortada" em pedaços da seguinte maneira: para o valor slice é especificado de um a quatro valores. Vamos analisar com um exemplo. Suponha que os seguintes valores sejam especificados: 10 20 30 40 (pixels px não são indicados, isso ocorre porque a imagem pode ser tanto raster quanto vetorial). Os valores indicam o seguinte: 10 cortar por cima, 20 cortar pela direita, 30 cortar por baixo, 40 cortar pela esquerda. Qual parte da imagem irá para o canto superior esquerdo? Será o pedaço: 10 por cima, 40 pela esquerda. Para o canto superior direito irá 10 por cima, 20 pela direita. E assim por diante.

Frequentemente a imagem é simétrica (como os losangos acima) e precisamos cortar pedaços iguais para os cantos. Nesse caso, é especificado um único valor, que definirá os mesmos deslocamentos de todos os lados. Para cortar os losangos laranja, especificaremos slice como 26 (pois o losango laranja tem tamanho 26px por 26px). Os losangos amarelos cairão nas linhas da borda e o seguinte acontecerá com eles: eles ou serão esticados por todo o bloco ou se repetirão ao longo da borda (depende do valor 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;
}

A propriedade border-image não permite especificar a espessura da borda do elemento. O navegador simplesmente estica a imagem ao longo da borda com a largura já existente. Portanto, ela precisa ser definida através da propriedade border.

Usuários de navegadores antigos (ou com imagens desabilitadas) verão uma moldura padrão, definida em border, portanto faz sentido definir para ela estilo e cor adequados.

Valores

Valor	Descrição
url(Caminho para a imagem)	Caminho para a imagem. Para mais detalhes, veja `border-image-source`.
deslocamento	Indica ao navegador quais partes da imagem irão para os cantos, e quais para os lados (e qual parte será a central). Valores possíveis: de `1` a `4` números \| de `1` a `4` percentuais. Pode ser especificada a palavra-chave `fill` além dos números ou percentuais, separados por espaço. Para mais detalhes, veja `border-image-slice`.
espessura	A propriedade controla a largura da parte visível da moldura, escala ela. Se este valor for maior que a largura de `border-width`, a imagem da moldura invadirá o conteúdo. Valores possíveis: Unidades CSS \| percentuais \| número \| `auto`. Para mais detalhes, veja `border-image-width`.
extensão	Propriedade interessante, que permite afastar a moldura para fora dos limites do elemento. Valores negativos não são suportados. Valores possíveis: Unidades CSS (exceto % (?)) \| número positivo \| auto. Para mais detalhes, veja `border-image-outset`.
repetição	Especifica como repetir a imagem nas bordas (não nos cantos): ladrilhar ou esticar. Valores possíveis: `stretch` \| `repeat` \| `round` \| `space`. Para mais detalhes, veja `border-image-repeat`.

Valor padrão: none 100%/1/0 stretch (url(caminho para a imagem) deslocamento/espessura/extensão repetição).

Exemplo . border-image-repeat: valor 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;
}

Exemplo . border-image-repeat: valor 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;
}

Exemplo . border-image-repeat: 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 funciona o 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;
}

Exemplo . border-image-repeat: duas palavras

Valor repeat para a largura e stretch para a altura:

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

Exemplo . Coincidência da largura da imagem com a largura da borda

Vamos aumentar o border-width ao passar o mouse, mantendo a espessura do border-image a mesma. Os losangos se esticarão por toda a borda:

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

Exemplo . border-image-slice

Vamos pegar outra imagem, na qual os diferentes pedaços não são iguais:

Vamos especificar quais partes da imagem devem ser cortadas - 25% 30% 10% 20%. Funciona assim: 25% - recuo por cima, 30% - recuo pela direita, 10% - recuo por baixo, 20% - recuo pela esquerda. Essencialmente, com esses pedaços cortamos os cantos. O canto superior esquerdo será 25% do topo da imagem, e 20% da esquerda. O canto superior direito será 25% do topo da imagem, e 30% da direita e assim por diante.

Além disso, se você passar o mouse sobre o bloco, a palavra-chave fill será acionada, e a parte central da imagem se tornará o fundo do nosso bloco:

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

Exemplo

Vamos fazer uma borda gradiente usando um gradiente linear:

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

Exemplo . border-image-width

Vamos definir o valor de border-image-width para 2 (a imagem da borda se tornará 2 vezes maior que a própria borda) ao passar o mouse sobre o elemento (26/2 - especificado após a barra, sendo que 26 é o valor de border-image-slice). Observe que a própria borda não aumentou, mas a imagem da borda - sim, e ela invadirá o texto:

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

Exemplo . border-image-outset

Vamos definir o valor de border-image-outset para 3 ao passar o mouse sobre o elemento. (26/1/2 - especificado após a segunda barra, sendo que 26 é o valor de 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;
}

Veja também

a propriedade border-image-source,
que define o caminho para a imagem da borda
a propriedade border-image-slice,
que define o corte da imagem para a borda
a propriedade border-image-repeat,
que define a repetição 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