Exemplo
Especificar uma imagem como a borda em torno de um elemento:
#borderimg
{
border-image-source: url(border.png);
}
Tente você mesmo " Definição e Uso
A propriedade border-image-source especifica o caminho para a imagem a ser usada como uma fronteira (instead of the normal border around an element) .
Tip: Se o valor for "none" , ou se a imagem não pode ser exibida, serão utilizados os estilos de borda.
Dica: Veja também a border-image propriedade (a shorthand property for setting all the border-image-* properties) .
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.borderImageSource="url(border.png)" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| border-image-source | 15,0 | 11.0 | 15,0 | 6 | 15,0 |
CSS Syntax
border-image-source: none|image|initial|inherit;Valores de propriedade
| Valor | Descrição |
|---|---|
| none | Nenhuma imagem será usada |
| image | O caminho para a imagem a ser usado como uma borda |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS3: CSS3 Border Imagens
CSS Referência: border-image property
CSS Referência: border-image-outset property
CSS Referência: border-image-repeat property
CSS Referência: border-image-slice property
CSS Referência: border-image-width property
HTML DOM de referência: borderImageSource property