Propriedade CSS border-image-width

A propriedade CSS border-image-width define a largura da imagem de borda de um elemento — ou seja, a espessura com que a borda baseada em imagem é desenhada ao redor da caixa. Ela é uma das propriedades CSS3.

Quando utilizá-la

Você só precisa de border-image-width quando um elemento já possui uma imagem de borda definida com border-image-source (e geralmente border-image-slice). Por si só, ela não faz nada.

Um ponto importante: border-image-width não é o mesmo que o border-width regular. O border-width comum reserva espaço no modelo de caixa e afeta o layout, enquanto border-image-width controla apenas a largura com que a imagem é pintada na região da borda. Se você tornar a imagem mais larga do que a borda real, ela pode transbordar para dentro sobre o padding/conteúdo do elemento sem empurrar outros conteúdos. É por isso que a maioria dos exemplos define primeiro uma border transparente e depois dimensiona a imagem com border-image-width.

Tipos de valores aceitos

A largura de cada lado pode ser expressa de diversas formas:

<length> — um tamanho fixo, como 20px.
<number> — um multiplicador do border-width correspondente. border-image-width: 2 significa "duas vezes a largura da borda". Este é o tipo usado pelo valor inicial 1.
<percentage> — relativo ao tamanho da área da imagem de borda (porcentagens horizontais usam a largura, as verticais usam a altura).
auto — usa a largura/altura intrínseca do border-image-slice correspondente, ou o border-width correspondente se não houver tamanho intrínseco.

Quantos valores utilizar

border-image-width aceita de um a quatro valores, seguindo o padrão de abreviação CSS em sentido horário:

Um valor — aplica-se a todos os quatro lados.
Dois valores — o primeiro é superior/inferior, o segundo é esquerda/direita.
Três valores — o primeiro é superior, o segundo é esquerda/direita, o terceiro é inferior.
Quatro valores — superior, direito, inferior, esquerdo (em sentido horário a partir do topo).

Quando um valor é omitido, ele espelha o lado oposto: um quarto valor omitido copia o segundo (esquerda = direita), um terceiro omitido copia o primeiro (inferior = superior), e um segundo omitido copia o primeiro (portanto, um único valor preenche tudo).

Valor Inicial	1
Aplica-se a	Todos os elementos, exceto elementos de tabela internos 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.borderImageWidth = "20px";

Sintaxe

Sintaxe da propriedade CSS border-image-width

border-image-width: number | % | auto | initial | inherit;

Exemplo da propriedade border-image-width:

Exemplo da propriedade CSS border-image-width com valor em px

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20;
        border-image-repeat: round;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Border-image-width Example</h1>
    <p class="border">Here the border-image-width is set to 20px.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Aqui está outro exemplo onde você pode ver o que muda ao usar um, dois, três ou quatro valores.

Exemplo da propriedade border-image-width com diferentes valores:

Exemplo da propriedade CSS border-image-width com dois, três e quatro valores

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border1 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 20px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 40px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px;
      }
      .border4 {
        border: 10px solid transparent;
        padding: 55px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 10%;
        border-image-repeat: round;
        border-image-width: 20px 10px 40px 55px;
      }
    </style>
  </head>
  <body>
    <h1>The border-image-width Example</h1>
    <p class="border1">Here the border-image-width is set to 20px.</p>
    <p class="border2">Here the border-image-width is set to 20px and 10px.</p>
    <p class="border3">Here the border-image-width is set to 20px, 10px and 40px.</p>
    <p class="border4">Here the border-image-width is set to 20px, 10px, 40px and 55px.</p>
  </body>
</html>

Experimente Você Mesmo »

No exemplo acima, .border1 usa um único valor para todos os lados, enquanto .border4 define uma largura diferente para cada lado — observe como os lados mais espessos pintam mais da imagem para dentro.

Propriedades relacionadas

border-image-source — define qual imagem é usada para a borda.
border-image-slice — divide a imagem de origem nas nove regiões que formam a borda.
border-image-outset — empurra a imagem de borda para além da caixa de borda.
border-width — a largura de borda regular que border-image-width multiplica quando um <number> é usado.

Valores

Valor	Descrição	Experimente
length	Uma unidade de comprimento (px) que define o tamanho do border-width.	Experimente »
number	A largura da borda é definida como um múltiplo do border-width correspondente. Não pode ser negativo, e o valor padrão é 1.	Experimente »
percentage	É calculado em relação à largura da área da imagem de borda para deslocamentos horizontais e à altura da área da imagem de borda para deslocamentos verticais.	Experimente »
auto	A largura da borda é igual à largura ou altura intrínseca do border-image-slice correspondente.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do seu elemento pai.

Prática

O que faz a propriedade 'border-image-width' no CSS?

Define a propriedade de largura da borda de uma imagem.Permite definir a imagem que será usada como borda.Permite ampliar ou diminuir a área da imagem de borda e possui quatro valores: superior, direito, inferior e esquerdo.Define a imagem de fundo da borda.Permite que as bordas sejam estilizadas com imagens.