Propriedade CSS border-image-source
A propriedade CSS border-image-source permite especificar uma imagem como borda de um elemento. Veja exemplos e teste você mesmo.
A propriedade CSS border-image-source define a imagem usada para desenhar a borda de um elemento, em vez do border-style comum. Ela responde à pergunta "qual imagem deve ser recortada e colocada ao redor do elemento?", enquanto as propriedades complementares decidem como essa imagem é cortada e organizada.
Esta página aborda os valores que border-image-source aceita, como ela funciona em conjunto com as outras propriedades border-image-*, os problemas que fazem uma imagem de borda desaparecer silenciosamente e exemplos editáveis.
border-image-source é uma das propriedades CSS3 e quase sempre é definida junto com border-image-slice por meio do atalho border-image.
Quando usar
Use uma imagem de borda quando um border simples não consegue expressar o visual desejado — uma moldura decorativa, uma faixa, uma borda desenhada à mão ou um contorno com gradiente. Como a fonte pode ser qualquer imagem, incluindo um gradiente CSS, você obtém efeitos que border-color sozinho não consegue produzir.
Como border-image-source se relaciona com as outras propriedades
border-image-source apenas nomeia a imagem. Quatro propriedades irmãs controlam o restante, e uma imagem de borda não é renderizada até que border-image-slice também seja definido:
border-image-slice— divide a fonte em 9 regiões (4 cantos, 4 arestas, 1 centro).border-image-width— a espessura da borda desenhada com a imagem.border-image-outset— o quanto a imagem se estende além da caixa de borda.css-border-image-repeat-property— se as fatias das arestasstretch,repeatouround.
Cuidados importantes
- Defina um
borderprimeiro. Uma imagem de borda preenche a área definida pela borda do elemento, portanto você ainda precisa de umborder-width(geralmenteborder: 10px solid transparent;). Sem uma largura de borda, não há nada a ser pintado. border-image-sliceé obrigatório. Definir apenas a fonte não exibe nada; o navegador precisa dos valores de slice para saber onde ficam os cantos.noneou uma falha de carregamento usaborder-stylecomo fallback. Se a imagem não puder ser exibida, os estilos de borda regulares serão usados — forneça umborder-stylevisível ao elemento como medida de segurança.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos, exceto elementos internos de tabela quando border-collapse é "collapse". Também se aplica a ::first-letter. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.borderImageSource = "url()"; |
Sintaxe
Valores de CSS border-image-source
border-image-source: none | image | initial | inherit;Exemplo da propriedade border-image-source:
Exemplo de código CSS border-image-source
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
border-image-slice: 15;
}
</style>
</head>
<body>
<h2>Border-image-source property example</h2>
<p class="border">Hello World!</p>
<p>Here is the original image:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
</body>
</html>Resultado
![Descrição do CSS border-image-source](/uploads/media/default/0001/04/aad8e5faee47f41e2ac519e2aa0214b5c1c9cb8f.png "CSS border-image-source example result" =420x)
Exemplo com um gradiente CSS como fonte
A fonte não precisa ser um arquivo — qualquer imagem CSS funciona, incluindo gradientes. Isto desenha uma moldura colorida sem nenhum arquivo de imagem:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient-border {
border: 12px solid transparent;
padding: 15px;
border-image-source: linear-gradient(45deg, #6610f2, #20c997);
border-image-slice: 1;
}
</style>
</head>
<body>
<p class="gradient-border">A border drawn from a CSS gradient.</p>
</body>
</html>Aqui, border-image-slice: 1 recorta um único pixel, o que é suficiente para um gradiente suave, pois o gradiente continua ao longo de cada aresta.
Valores
| Valor | Descrição |
|---|---|
| none | Nenhuma imagem é usada; o elemento usa seu border-style como fallback. Este é o valor padrão. |
| image | Qualquer <image> CSS: um url() para um arquivo ou um gradiente como linear-gradient(...) / radial-gradient(...). |
| initial | Define a propriedade com seu valor padrão (none). |
| inherit | Herda o valor do elemento pai. |
Propriedades relacionadas
- border-image — o atalho para todas as cinco propriedades
border-image-*. - border-image-slice — obrigatório para renderizar a imagem.
- border-image-width e border-image-outset — tamanho e estouro.
- border-image-repeat — como as arestas são repetidas.