Propriedade border-image-slice

A propriedade border-image-slice indica ao navegador quais partes da imagem serão usadas para os cantos e quais para os lados (e qual parte será a central). Para os cantos vão 4 partes, para os lados vão 4 partes e uma parte (central) vai para o fundo do elemento (opcionalmente, palavra-chave fill).

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

Sintaxe

<+css+> seletor { border-image-slice: de 1 a 4 números | de 1 a 4 porcentagens; } <-css->

Com números e porcentagens, separados por espaço, pode estar a palavra-chave fill.

Valores

Valor	Descrição
porcentagens	As porcentagens são calculadas em relação ao tamanho da imagem. Horizontais em relação à largura, verticais — em relação à altura.
números	Números são pixels (para imagem rasterizada) ou coordenadas (para imagem vetorial). As unidades de medida não são especificadas.
`fill`	O comportamento padrão assume que a parte central da imagem será descartada. Para utilizá-la, é necessário usar a palavra-chave `fill` além dos números ou porcentagens.

Quantidade de parâmetros

O deslocamento pode receber 1, 2, 3 ou 4 parâmetros. Observe que as unidades de medida para o deslocamento não são escritas (por exemplo, apenas 20, e não 20px). Também é possível definir a espessura em %.

Número de parâmetros	Descrição
`1`	Espessura para todos os lados simultaneamente.
`2`	1 2; - `1px` para topo e base, `2px` para esquerda e direita.
`3`	`1 2 3`; - `1px` para o topo, `2px` para esquerda e direita, `3px` para a base.
`4`	`1 2 3 4`; - `1px` para o topo, `2px` para a direita, `3px` para a base, `4px` para a esquerda.

Valor padrão: 100%(?).

Exemplo

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

#elem {
	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;
}

Exemplo

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

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

Veja também

a propriedade border-image,
que é uma shorthand para borda de imagem
a propriedade border-image-source,
que define o caminho da imagem para a borda
a propriedade border-image-repeat,
que define a repetição da imagem para a borda
a propriedade border-image-width,
que define o tamanho da imagem para a borda
a propriedade border-image-outset,
que define o deslocamento da imagem para a borda