Propriedade CSS border-image-slice

A propriedade CSS border-image-slice define como recortar a imagem definida por border-image-source para que o navegador possa usar as partes como borda. A imagem é dividida em nove regiões: quatro cantos, quatro bordas e uma parte central. É uma das propriedades CSS3.

Imagine duas linhas horizontais e duas verticais traçadas sobre a imagem de origem. Onde se cruzam, elas dividem a imagem em uma grade 3×3. Os quatro blocos dos cantos são posicionados nos cantos da borda do elemento, os quatro blocos das bordas são esticados ou repetidos ao longo de cada lado (controlado por border-image-repeat), e o bloco central é descartado por padrão — permanece totalmente transparente, a menos que você adicione a palavra-chave fill, caso em que é desenhado atrás do conteúdo como uma imagem de fundo.

border-image-slice é a propriedade que decide onde essas quatro linhas são traçadas. Sozinha, ela não tem efeito visível; sempre funciona em conjunto com border-image-source e um border-width diferente de zero (ou o border-image-width da forma abreviada). É por isso que todos os exemplos abaixo também definem uma border transparente e usam a forma abreviada border-image para fornecer a origem.

Como os valores funcionam

A propriedade aceita um number, uma percentage e uma palavra-chave opcional fill:

number — um deslocamento de borda medido em pixels para imagens rasterizadas (PNG, JPEG) e em coordenadas para imagens vetoriais (SVG). Nota: o número é sem unidade aqui — escreva 30, não 30px.
percentage — um deslocamento de borda como porcentagem do tamanho da imagem de origem (sua largura para os recortes esquerdo/direito, sua altura para os recortes superior/inferior).
fill — mantém e exibe a região central em vez de descartá-la.

Você pode fornecer um a quatro valores de deslocamento. Valores negativos não são permitidos, e deslocamentos maiores que a imagem são limitados ao máximo. Os valores seguem a ordem padrão das bordas CSS:

Valores fornecidos	Significado
`20%`	Todos os quatro lados recortados na mesma distância.
`30 50`	Superior & inferior = `30`; esquerdo & direito = `50`.
`30 50 10`	Superior = `30`; esquerdo & direito = `50`; inferior = `10`.
`30 50 10 5`	Superior = `30`; direito = `50`; inferior = `10`; esquerdo = `5` (sentido horário a partir do topo).

Quando devo usar?

Use border-image-slice sempre que criar uma moldura decorativa a partir de uma única imagem — bordas ornamentadas, bordas em fita, painéis estilo quadrinhos ou gráficos arredondados em "bolha" que precisam escalar para qualquer tamanho de elemento sem distorcer os cantos. Ao separar os cantos da parte esticável do meio das bordas, os cantos permanecem nítidos em qualquer largura de elemento, enquanto os lados repetem ou esticam para se ajustar.

Valor Inicial	100%.
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.borderImageSlice = "10%";

Sintaxe

Sintaxe da propriedade CSS border-image-slice

border-image-slice: number | % | fill | initial | inherit;

Exemplo da propriedade border-image-slice:

Exemplo da propriedade CSS border-image-slice com valor %(porcentagem)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 20%.</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

No próximo exemplo, dois valores são usados. O primeiro valor (30) cria recortes medidos a partir do topo e da base, e o segundo valor (50) cria recortes medidos a partir da esquerda e da direita.

Exemplo da propriedade border-image-slice com dois valores:

Exemplo da propriedade CSS border-image-slice com dois valores

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 30 and 50.</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 »

No exemplo seguinte, o valor % é combinado com a palavra-chave fill, de modo que a região central descartada da imagem também é desenhada atrás do conteúdo do parágrafo.

Exemplo da propriedade border-image-slice com os valores "%" e "fill":

Exemplo da propriedade CSS border-image-slice com valores de porcentagem e fill

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border"><strong>Here the border-image-slice is set to 15 fill.</strong></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 »

Valores

Valor	Descrição	Experimente
number	Representa um deslocamento de borda em pixels para imagens rasterizadas e em coordenadas para imagens vetoriais.	Experimente »
%	Representa um deslocamento de borda como porcentagem do tamanho da imagem de origem.	Experimente »
fill	Faz com que a parte central da imagem seja exibida como imagem de fundo.	Experimente »
initial	Define a propriedade para seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

border-image-slice é uma das várias propriedades individuais que compõem a forma abreviada border-image. Para ter uma visão completa de como as imagens de borda são construídas, veja também:

border-image-source — define a imagem a ser recortada.
border-image-width — define a largura da área da imagem de borda.
border-image-repeat — controla como os recortes das bordas são esticados, repetidos ou arredondados.
border-image-outset — empurra a imagem de borda para além da caixa de borda.

Prática

O que a propriedade border-image-slice em CSS faz?

Controla a quantidade do campo de entrada que deve estar dentro da área de texto.Divide a imagem usada para criar uma borda em 9 regiões: 4 cantos, 4 bordas e um centro.É usada para criar transformações 3D, transições e animações em HTML e CSS.Define como a imagem de borda é preenchida e dimensionada em relação à caixa de borda.