Propriedade CSS border-image
A propriedade abreviada CSS border-image permite usar uma imagem como borda de um elemento. Veja exemplos e experimente.
A propriedade abreviada border-image permite usar uma imagem — ou um gradiente CSS — como a borda de um elemento, em vez de uma linha sólida simples. É uma das propriedades CSS3.
Esta página explica como a propriedade funciona (o modelo de nove fatias por trás dela), a sintaxe da forma abreviada, vários exemplos executáveis e quando faz sentido usar border-image.
Como border-image funciona: o modelo de nove fatias
O truque que faz border-image funcionar é o nine-slicing (divisão em nove partes). O navegador pega sua imagem de origem e a corta com quatro linhas — duas horizontais, duas verticais — em nove regiões:
- 4 cantos são colocados nos quatro cantos do elemento e nunca são esticados ou repetidos.
- 4 bordas (superior, direita, inferior, esquerda) preenchem o espaço entre os cantos. Elas são esticadas, repetidas, arredondadas ou espaçadas dependendo de border-image-repeat.
- 1 centro é descartado por padrão, permitindo que o fundo do elemento apareça. Adicione a palavra-chave
fillem border-image-slice para mantê-lo.
A posição dessas linhas de corte é controlada por border-image-slice. É esse modelo que permite que uma pequena imagem de uma moldura decorativa envolva uma caixa de qualquer tamanho sem distorcer os cantos.
Importante:
border-imagesó é exibido quando o elemento realmente possui uma borda. É necessário definir umborder-style(ou a forma abreviada border) diferente denone— por exemploborder: 10px solid transparent;— caso contrário, nada aparece.
A forma abreviada e suas subpropriedades
Esta forma abreviada combina várias propriedades individuais de border-image. Os valores omitidos assumem seus valores iniciais. Veja as notas para cada subpropriedade abaixo:
- border-image-source - Se o valor for "none", ou se a imagem não puder ser exibida, os estilos de borda serão usados.
- border-image-slice - A parte central da imagem é tratada como totalmente transparente, a menos que o valor "fill" seja definido.
- border-image-width - Se o valor desta propriedade for maior que a border-width do elemento, a imagem de borda se estenderá além da borda de padding (e/ou content). Também é importante saber que esta propriedade pode ser especificada com um, dois, três ou quatro valores.
- border-image-outset - Também pode ser especificada com um, dois, três ou quatro valores.
- border-image-repeat - Pode ser especificada com dois valores. Se o segundo valor for omitido, assume-se que é igual ao primeiro. Quando definimos apenas um valor, ele aplica o mesmo comportamento nos quatro lados; quando definimos dois valores, o primeiro se aplica ao topo e à base, e o segundo à esquerda e à direita.
| Propriedade | Valor |
|---|---|
| Valor Inicial | none 100% 1 0 stretch |
| 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.borderImage = "url(border.png) 30 round" |
Sintaxe
Sintaxe da Propriedade CSS border-image
border-image: source slice width outset repeat | initial | inherit;Exemplo da propriedade border-image:
Exemplo da Propriedade CSS border-image
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 10%;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">border-image: 10% round;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Resultado
Exemplo da propriedade border-image com múltiplos valores:
Exemplo da Propriedade CSS border-image com diferentes valores
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 30%;
border-image-repeat: repeat;
border-image-width: 15px;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 20%;
border-image-repeat: round;
border-image-width: 10px;
}
.border3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
border-image-slice: 15%;
border-image-repeat: space;
border-image-width: 20px;
}
</style>
</head>
<body>
<h2>Border-image example with all values.</h2>
<p class="border">border-image: 30% 15px repeat</p>
<p class="border2">border-image: 20% 10px round;</p>
<p class="border3">border-image: 15% 20px space;</p>
<p>Here is the original image used:</p>
<img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
</body>
</html>Usando um gradiente CSS como borda
border-image-source também aceita um gradiente além de uma URL, permitindo criar uma borda colorida sem nenhum arquivo de imagem. O gradiente é tratado exatamente como uma imagem e fatiado da mesma forma.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.gradient-border {
border: 12px solid transparent;
padding: 15px;
border-image: linear-gradient(45deg, #1095c1, #f7df1e) 1;
}
</style>
</head>
<body>
<p class="gradient-border">A border drawn from a CSS gradient.</p>
</body>
</html>O 1 após o gradiente é o valor de border-image-slice. Como um gradiente não tem bordas reais a proteger, fatiá-lo em 1 simplesmente mapeia as quatro bordas e cantos para a borda sem distorção.
Quando usar border-image
Use border-image quando uma única cor sólida não for suficiente:
- Molduras decorativas ou temáticas — bordas ornamentadas, desenhadas à mão ou com aparência de papel rasgado que seriam impossíveis com
border-style. - Bordas com gradiente — veja o exemplo acima; muito mais simples do que simular com um elemento envoltório e
background-clip. - Padrões repetidos — um pequeno bloco que envolve caixas de qualquer tamanho graças ao modelo de nove fatias.
Para cantos arredondados simples, use border-radius; para uma linha colorida normal, use a forma abreviada padrão border — elas são mais leves e animáveis, enquanto border-image não é.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| border-image-source | Especifica a imagem de origem usada para criar a imagem de borda. Pode ser uma URL, URI de dados, gradiente CSS ou SVG inline. | |
| border-image-slice | Especifica como fatiar a imagem definida por border-image-source. A imagem é sempre dividida em nove seções: quatro cantos, quatro bordas e o centro. | Experimente » |
| border-image-width | Especifica a largura da imagem de borda. | |
| border-image-repeat | Especifica se a imagem de borda é repetida, arredondada ou esticada. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | |
| inherit | Herda a propriedade do elemento pai. |
Suporte dos navegadores
border-image é suportado em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera). Como ele volta automaticamente para o border-style/border-color definido, é possível combiná-lo com uma borda normal como aprimoramento progressivo: navegadores mais antigos ou sem suporte exibem a borda simples, enquanto os mais novos exibem a imagem.