Propriedade border-image-outset

A propriedade border-image-outset permite deslocar a borda para fora do elemento. Como valor, é especificado um número sem unidades de medida ou qualquer unidade para tamanhos, exceto porcentagem. Se for especificado um número sem unidades, ele é um multiplicador pelo qual os valores da propriedade border-width são multiplicados. Valores negativos não são suportados.

Para informações mais detalhadas sobre imagens de borda, consulte a propriedade border-image.

Sintaxe

seletor {
	border-image-outset: número positivo;
}

Exemplo . Número

Vamos definir o valor de border-image-outset para 3 quando o mouse passar sobre o elemento. Isso fará com que a borda se desloque em 26px*3 - 3 vezes mais longe do que sua largura, definida em border-width:

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

#elem:hover {
	border-image-outset: 3;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 100px auto;
}

Exemplo . Pixels

Vamos definir o valor de border-image-outset para 30px quando o mouse passar sobre o elemento. Isso fará com que a borda se desloque em 30px:

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

#elem:hover {
	border-image-outset: 30px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 50px auto;
}

Veja também

a propriedade border-image,
que é uma forma abreviada para borda de imagem
a propriedade border-image-source,
que define o caminho da imagem para a borda
a propriedade border-image-slice,
que define o recorte 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