Imagem de fronteira - CSS-Tricks

border-image é uma propriedade abreviada que permite usar uma imagem ou gradiente CSS como a borda de um elemento.

.module ( border-image: url(border.png.webp) 25 25 round; )

A border-imagepropriedade pode ser aplicada a qualquer elemento, exceto elementos internos da tabela (por exemplo, tr, th, td) quando border-collapseé definido como collapse.

Propriedades

A única propriedade necessária para a border-imageabreviação é border-image-source. As outras propriedades assumem seus valores iniciais se não forem especificadas. Estas são as border-imagepropriedades em ordem:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Esta propriedade especifica a origem da imagem da borda. Pode ser um URL, URI de dados, gradiente CSS ou SVG embutido (embora o suporte seja limitado para SVG embutido, consulte as notas de uso de SVG).

O valor inicial é none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Os valores dessa propriedade informam ao navegador onde “fatiar” a imagem para criar as partes da borda. A imagem é dividida em 9 seções - os quatro cantos, os quatro lados e o centro.

Oito corações em uma imagem de “moldura”, ampliada para mostrar detalhes. As linhas vermelhas indicam fatias.

Se você acha que isso soa absurdo, você está em boa companhia. Houve uma longa discussão sobre o assunto no blog de Eric Myer alguns anos atrás, onde muitos grandes nomes do desenvolvimento de front-end participaram.

Nesta demonstração, um coração se repete ao redor da borda do div. A border-image-sourceimagem é uma imagem composta de oito do mesmo ícone de coração, cortada de forma que a forma de coração inteira seja usada em cada lado do elemento.

Veja a demonstração da imagem da borda da caneta: borda do ícone por CSS-Tricks (@ css-tricks) no CodePen.

Mais notas de uso

Embora o suporte para border-imagetenha melhorado - é compatível sem prefixo em todas as versões atuais do navegador - borderainda vale a pena definir um estilo de fallback . Sua borda reserva será exibida em navegadores incompatíveis border-imageou se a imagem falhar ao carregar.

Ao contrário de algumas das outras propriedades de borda, border-imagenão pode ser animado. Também não pode ser estilizado border-radius.

Se você declarar um border-image-sourcee uma borderlargura ou border-image-widthsem fatias, toda a imagem unsliced serão colocados nos quatro cantos do elemento, escalado para a largura especificada.

Relacionado

border
border-collapse
box-sizing

Mais Informações

border-image no CSS Background and Borders Module Nível 3 CR
border-image em MDN
border-image.com, esta ferramenta permite que você carregue uma imagem e brinque com as fatias da borda até que você as acerte, então ela gera o CSS para você.
Imagem da borda explicada de Dudley Storey.

Mais demos

Também de Dudley Storey, Practical border-image: responsive picture frame, uma demonstração do CodePen. Este é um bom exemplo de como usar uma imagem de borda de maneira sensata em uma imagem responsiva. Observe que o “quadro” é removido em telas menores.
Bordas pontilhadas verdadeiras usando SVG e imagem de borda, uma caneta de Lucas Lemonnier. Uma solução para a feia borda quadrada “pontilhada”, este método fornece pontos redondos reais!
botão gradiente, uma caneta do usuário CodePen GSSxGSS. Um belo exemplo de gradiente linear como imagem de borda.
Film Strip, uma caneta de Nick Pettit. Talvez não seja a demonstração mais prática, este é um exemplo divertido e artístico do que você pode fazer border-image.

Suporte para navegador

border-imageprefixos de fornecedor originalmente exigidos em todos os navegadores que o suportavam. Agora funciona sem prefixo na versão mais recente de todos os navegadores. Esta tabela mostra o suporte prefixado mais antigo e o suporte não prefixado mais antigo, quando aplicável.