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

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

Valores

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

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

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

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

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

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

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

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

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