Propriedade CSS border-image-repeat

A propriedade CSS border-image-repeat controla como as fatias laterais de uma border-image são escaladas para preencher as bordas de um elemento. Ela define se essas fatias são esticadas, repetidas (em mosaico), arredondadas para que um número inteiro de peças caiba, ou espaçadas com lacunas. É uma das propriedades CSS3.

Quando você fornece uma imagem de borda, a propriedade border-image-slice a divide em nove regiões: quatro cantos, quatro bordas e um centro. Os cantos são sempre posicionados uma vez em cada canto — mas as quatro fatias de borda geralmente precisam cobrir uma distância que não é um múltiplo exato do tamanho da fatia. border-image-repeat é o que informa ao navegador como lidar com essa incompatibilidade.

A propriedade pode ser definida com um ou dois valores. Se um valor for especificado, ele aplica o mesmo comportamento nos quatro lados. Se dois valores forem especificados, o primeiro se aplica ao topo e à base, e o segundo, à esquerda e à direita.

Valor Inicial	stretch
Aplica-se a	Todos os elementos, exceto elementos internos de tabela quando border-collapse é "collapse". Também se aplica a ::first-letter.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.borderImageRepeat = "round";

Sintaxe

Sintaxe da Propriedade CSS border-image-repeat

border-image-repeat: stretch | repeat | round | space | initial | inherit;

Exemplo da propriedade border-image-repeat:

Exemplo da Propriedade CSS border-image-repeat com o valor round

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border">border-image-repeat: round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade border-image-repeat com os valores "round" e "repeat":

Exemplo da Propriedade CSS border-image-repeat com os valores round e repeat

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: repeat;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: round;</p>
    <p class="border2">border-image-repeat: repeat;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade border-image-repeat com os valores "space" e "stretch":

Exemplo da Propriedade CSS border-image-repeat com os valores space e stretch

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: space;
        border-image-width: 10px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 100;
        border-image-repeat: stretch;
        border-image-width: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-repeat property example</h2>
    <p class="border1">border-image-repeat: space;</p>
    <p class="border2">border-image-repeat: stretch;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Experimente Você Mesmo »

Como cada valor se comporta

As quatro palavras-chave diferem apenas na forma como lidam com o fato de que uma fatia de borda raramente se encaixa uniformemente no lado que precisa preencher:

stretch (o padrão) pega uma única fatia de borda e a escala para preencher todo o lado. Não há mosaico, portanto um padrão com motivos distintos (pontos, formas, texto) será distorcido, mas um gradiente suave ou textura sólida permanece inalterado.
repeat repete a fatia de borda em seu tamanho natural e simplesmente recorta o que não couber. As peças mantêm suas proporções, mas pode aparecer uma peça parcial cortada em cada canto — e o padrão geralmente não fica centralizado.
round também usa mosaico, mas primeiro redimensiona levemente a fatia para que um número inteiro de peças caiba exatamente entre os cantos. Use isso quando quiser uma repetição limpa e simétrica sem peças cortadas, e uma pequena distorção for aceitável.
space repete em tamanho natural como repeat, mas em vez de recortar, descarta a peça parcial restante e distribui o espaço liberado como lacunas iguais entre as peças completas. (space tem o menor suporte de navegadores dos quatro.)

Uma regra prática: escolha stretch para gradientes e texturas contínuas, round para padrões decorativos onde a simetria importa, e repeat ou space quando quiser manter o motivo exatamente no seu tamanho original.

Nota: border-image-repeat não tem efeito sozinho — o elemento já deve ter um border-image-source definido e uma largura de borda diferente de zero. É mais frequentemente escrito como parte da abreviação border-image em vez de ser usado individualmente.

Valores

Valor	Descrição	Experimente
stretch	Cada espaço entre as bordas será preenchido com imagens esticadas. Este é o valor padrão.	Experimente »
repeat	Cada espaço entre as bordas será preenchido com imagens repetidas. Para atingir o ajuste correto, as repetições podem ser recortadas.	Experimente »
round	Cada espaço entre as bordas será preenchido com imagens repetidas. Para atingir o ajuste correto, as repetições podem ser esticadas.	Experimente »
space	Cada espaço entre as bordas será preenchido com imagens repetidas. Para atingir o ajuste correto, espaço extra será distribuído entre as repetições.
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

Quais valores podem ser usados com a propriedade CSS border-image-repeat?

Propriedades relacionadas

Os outros subcomandos border-image-* funcionam em conjunto com border-image-repeat:

border-image — a abreviação que define todos de uma vez.
border-image-source — a imagem a ser usada.
border-image-slice — como a fonte é dividida em nove regiões.
border-image-width — a largura da área da imagem de borda.
border-image-outset — o quanto a imagem se estende além da caixa de borda.