Imagem da Borda do CSS

Imagem da Borda do CSS

Ao usar CSS border-image Propriedade que pode configurar uma imagem para usar como borda ao redor do elemento.

Propriedade border-image CSS

CSS border-image A propriedade permite que você especifique a imagem a ser usada em vez da borda comum.

Essa propriedade tem três partes:

  • Imagem usada como borda
  • Onde cortar a imagem
  • Definir se a parte central deve ser repetida ou esticada

Vamos usar esta imagem ("border.png")

border-image A propriedade aceita imagens, corta-as em nove partes, como no tabuleiro de xadrez. Em seguida, coloca os cantos nos cantos e repete ou estica a parte central conforme a configuração.

Atenção:Para fazer border-image Para funcionar, o elemento ainda precisa definir border Atributo!

Aqui, a parte central da imagem é repetida para criar a borda:

A imagem é usada como borda!

Aqui está o código:

Exemplo

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Experimente você mesmo

Aqui, a parte central da imagem é esticada para criar a borda:

A imagem é usada como borda!

Aqui está o código:

Exemplo

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Experimente você mesmo

Dica:border-image Essa propriedade é uma abreviação dos seguintes atributos:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - valores de recorte diferentes

Diferentes valores de recorte alteram completamente a aparência da borda:

Exemplo 1:

border-image: url(border.png) 50 round;

Exemplo 2:

border-image: url(border.png) 20% round;

Exemplo 3:

border-image: url(border.png) 30% round;

Aqui está o código:

Exemplo

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Experimente você mesmo

Propriedade de imagem da borda CSS

Atributo Descrição
border-image Atributo abreviado para definir todos os atributos border-image-*.
border-image-source Define o caminho da imagem usada como borda.
border-image-slice Determina como a imagem da borda deve ser cortada.
border-image-width Determina a largura da imagem da borda.
border-image-outset Determina a quantidade de área da imagem da borda que excede a caixa da borda.
border-image-repeat Determina se a imagem da borda deve ser repetida, arredondada ou esticada.