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

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

Valores

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):

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

css#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:

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

css#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):

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

css#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:

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

css#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:

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

css#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:

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

css#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