CSS3 border-image Property

Exemplo

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

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

A propriedade border-imagem permite especificar uma imagem a ser usada em vez da borda normal em torno de um elemento.

A propriedade border-imagem é um atalho para definir os border-image-source , border-image-slice , border-image-width , border-image-liminarmente e border-image-repeat propriedades.

valores omitidos são definidas para seus valores padrão.

Valor padrão:	none 100% 1 0 stretch
Herdado:	no
Animatable:	no. Read about animatable
Versão:	CSS3
sintaxe JavaScript:	object .style.borderImage="url(border.png) 30 round" Try it

Suporte a navegadores

Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.

Números seguido por -webkit-, -moz-, ou O- especificar a primeira versão que trabalhou com um prefixo.

Propriedade
border-image	16,0 4.0 -webkit-	11.0	15,0 3,5 -moz-	6 3.1 -webkit-	15,0 11,0 -o-

Nota: Consulte o suporte ao navegador individual para cada valor abaixo.

CSS Syntax

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

Valores de propriedade

Valor	Descrição	Jogue
border-image-source	O caminho para a imagem a ser usado como uma borda
border-image-slice	Como cortar a imagem Beira	Jogue "
border-image-width	A largura da imagem Beira
border-image-outset	O valor pelo qual a área da imagem fronteira se estende para além da caixa de fronteira
border-image-repeat	Se a imagem de fronteira deve ser repetido, arredondado ou esticado	Jogue "
initial	Define essa propriedade para o valor padrão. Leia sobre inicial
inherit	Herda essa propriedade do seu elemento pai. Leia sobre herdar

mais Exemplos

Exemplo

valores fatia diferente muda completamente o visual da fronteira:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

Tente você mesmo "