Atributo border-image do CSS

Definição e uso

A propriedade border-image é uma propriedade abreviada que define as seguintes propriedades:

Se o valor for omitido, será configurado o valor padrão.

Dica:Use as propriedades border-image-* para construir botões bonitos e ajustáveis!

Veja também:

Tutorial CSS3:Bordas do CSS3

Exemplo

Defina a imagem como a borda que envolve o elemento div:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Experimente você mesmo

Mais exemplos no rodapé da página.

Sintaxe CSS

border-image: source slice width outset repeat|initial|inherit;

Valor do atributo

Valor Descrição Teste
border-image-source Caminho da imagem usada na borda.
border-image-slice Deslocamento da borda da imagem para dentro.
border-image-width Largura da borda da imagem.
border-image-outset A quantidade que a área da imagem da borda ultrapassa a borda.
border-image-repeat Se a borda da imagem deve ser repetida (repetida), arredondada (arredondada) ou esticada (esticada). Teste

Detalhes técnicos

Valor padrão: none 100% 1 0 stretch
Herança: não
Versão: CSS3
Sintaxe JavaScript: object.style.borderImage="url(border.png) 30 30 round"

Mais exemplos

Botão Border-image
Este exemplo demonstra como criar botões usando a propriedade border-image.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-