Propriedade Border Image
Última atualização: 2026-09-13
border-image Propriedade Border Image
A border-image permite usar uma imagem para desenhar a borda de um elemento em vez de uma linha sólida ou tracejada. A imagem é fatiada em uma grade de nove partes (quatro cantos, quatro bordas e uma área central) e cada parte é mapeada para a área de borda correspondente. É uma ferramenta poderosa para bordas decorativas complexas.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
border-image: <border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<border-image-source> || <border-image-slice> || <border-image-width> || <border-image-outset> || <border-image-repeat> | Valor | Atalho da border image |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-image | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Aviso： Ao usar border-image, você também deve declarar border ou border-width; caso contrário, a borda de imagem não será visível.
Dica： O valor border-image-slice é a distância de corte para dentro a partir das bordas da imagem; a palavra-chave round faz a imagem de borda lado a lado e escalar para caber no comprimento do lado.
❓ Perguntas Frequentes
QQuão bom é o suporte de navegadores para border-image?
ANavegadores modernos (Chrome, Firefox, Edge, Safari) oferecem suporte, mas o IE11 e anteriores têm suporte limitado ou nenhum. Sempre declare border: solid com border-width como fallback para que navegadores sem border-image renderizem uma borda normal; caso contrário, o elemento pode acabar sem nenhuma borda.
QPor que minha borda não aparece após usar border-image?
ACausas comuns: nenhum border-width definido — a border-image não fornece largura por conta própria, então você precisa de border primeiro para criar a área de borda; um caminho de imagem errado; ou um valor de slice maior que a imagem real. O padrão confiável é border: 20px solid transparent; seguido de border-image.
QO que significam slice, repeat e outset em border-image?
Aslice é a distância cortada para dentro a partir de cada borda para formar a grade de nove partes (sem unidade, tratada como pixels ou porcentagens). repeat determina como as bordas são preenchidas: stretch (estica), round (lado a lado e escala para caber) e repeat (lado a lado, possivelmente recortado). outset estende a imagem de borda para fora. A ordem do atalho é: url(imagem) slice / width / outset repeat.
Qborder-image pode ser usada junto com border-radius?
ANa verdade, não. A border-image não é recortada por border-radius, então a área arredondada mostra cantos de imagem protuberantes ou bordas irregulares, e a combinação fica feia. Para um efeito de 'canto arredondado mais borda de imagem', simule com background-image e padding, ou use técnicas de mask.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
