Propriedade de imagem de borda CSS

❮ Anterior Referência CSS completa Próximo ❯

Exemplo

Especifique uma imagem como a borda em torno de um elemento:

#borderimg {
border-image: url(border.png) 30 round;
}

Mais exemplos de "Experimente você mesmo" abaixo.

Definição e uso

A border-imagepropriedade permite especificar uma imagem a ser usada como borda ao redor de um elemento.

A propriedade border-image é uma propriedade abreviada para:

Os valores omitidos são definidos para seus valores padrão.

Valor padrão:	nenhum 100% 1 0 esticar
Herdado:	não
Animavel:	não. Leia sobre animáveis
Versão:	CSS3
Sintaxe JavaScript:	object .style.borderImage="url(border.png) 30 rodadas"

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Números seguidos por -webkit-, -moz- ou -o- especificam a primeira versão que funcionou com um prefixo.

Property
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Observação: consulte o suporte individual do navegador para cada valor abaixo.

Sintaxe CSS

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

Valores de propriedade

Value	Description	Play it
border-image-source	The path to the image to be used as a border
border-image-slice	How to slice the border image
border-image-width	The width of the border image
border-image-outset	The amount by which the border image area extends beyond the border box
border-image-repeat	Whether the border image should be repeated, rounded or stretched
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Mais exemplos

Exemplo

Diferentes valores de fatia alteram completamente a aparência da borda:

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}