Propriedade border-image-width

A propriedade border-image-width controla a largura da parte visível da borda, dimensiona-a. Se este valor for maior que a largura de border-width, a imagem da borda irá sobrepor o conteúdo.

Para informações mais detalhadas, consulte a propriedade border-image.

Sintaxe

seletor {
	border-image-width: unidades CSS | porcentagem | número | auto;
}

Valores

Valor	Descrição
Unidades CSS	Valor nas unidades CSS especificadas.
Porcentagem	Valores em porcentagem relativos ao tamanho do bloco ao qual a borda é aplicada.
Número	Valor numérico pelo qual é multiplicada a `border-width`.
`auto`	Palavra-chave. Se especificada, o valor é igual ao `border-image-slice` correspondente. Se não houver um tamanho adequado, o valor de `border-width` é usado, e a imagem preenche todo o canto da borda, sobrepondo o conteúdo. Consulte os exemplos para melhor compreensão.

Valor padrão: 1.

Exemplo . Número

Vamos definir o valor de border-image-width para 2 ao passar o mouse sobre o elemento. Com isso, a borda terá um tamanho de 26px*2 - 2 vezes maior que sua largura definida em border-width. A borda, portanto, sobreporá o texto (como um fundo):

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

Exemplo . Vamos alterar border-image-repeat para round

No exemplo anterior, ao passar o mouse, a borda não terá um número inteiro de losangos. Vamos corrigir isso, definindo border-image-repeat para o valor 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;
}

Exemplo . Porcentagem

Vamos definir o valor de border-image-width para 50% ao passar o mouse sobre o elemento. Com isso, a borda terá um tamanho de 50% do tamanho do bloco (ou seja, as duas bordas, direita e esquerda, cobrirão todo o bloco):

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

Exemplo . Porcentagem

Vamos definir o valor de border-image-width para 30% ao passar o mouse sobre o elemento. Com isso, a borda terá um tamanho de 30% do tamanho do bloco:

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

Exemplo . Pixels

Vamos definir o valor de border-image-width para 50px ao passar o mouse sobre o 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;
}

Exemplo . Valor auto

Vamos definir o valor de border-image-width para auto ao passar o mouse sobre o elemento.

Antes de passar o mouse, border-image-width tem o valor 1 (padrão). No exemplo, border-width está definido especificamente como 52px, e border-image-slice - com o valor 26 (o efeito com auto será observado apenas se border-width for diferente de border-image-slice). Devido ao fato de que border-image-width ter o valor 1, a imagem da borda ocupará toda a largura de border-width, ou seja, será esticada para 52px. Ao passar o mouse, o valor de border-image-width será definido como auto e a largura da imagem se tornará igual ao valor de border-image-slice, ou seja, 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;
}

Veja também

a propriedade border-image,
que é uma shorthand para a imagem da borda
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-repeat,
que define a repetição da imagem para a borda
a propriedade border-image-outset,
que define o deslocamento da imagem para a borda