O CSS Styling é uma parte central do HTML usado para tornar um site apresentável. CSS permite diferentes propriedades de estilo, uma das quais é o “imagem de fronteira" propriedade. Com a ajuda da propriedade mencionada, você pode definir uma imagem como uma borda de um elemento HTML em vez do estilo de borda típico.

Este guia mostrará como usar a propriedade CSS Border-Image.

Como usar a propriedade de imagem de fronteira CSS?

A propriedade de imagem de fronteira é usada para definir a imagem como uma borda em torno de um elemento.

Sintaxe

A sintaxe da propriedade de imagem de fronteira é:

Imagem de fronteira: fatia de fonte / largura acaba

A imagem de fronteira é uma propriedade abreviada do CSS com cinco propriedades diferentes, como:

• Fonte de fronteira: É usado para especificar a fonte de imagem.
• Slice de imagem de fronteira: É usado para cortar a imagem da fronteira.
• largura de imagem de fronteira: É utilizado para definir a largura da fronteira.
• Off-Outset de imagens de borda: É usado para definir a quantidade de espaço que a imagem da fronteira ocupa a estrutura da fronteira.
• repetição de imagens de fronteira: É usado para evitar a repetição da imagem da fronteira e preencher a área da fronteira.

Observação: Se especificarmos apenas a fonte da imagem em vez de todos os valores, a borda da imagem será definida de acordo com os valores padrão dessas propriedades.

Para entender perfeitamente, mova-se para o exemplo prático da propriedade de imagem de fronteira.

Exemplo: definir uma imagem como borda com propriedade de imagem de borda

Para criar uma imagem de borda em torno de um elemento, primeiro, adicione um elemento em um arquivo html. Para fazer isso, criaremos um e atribuiremos um “fronteira”Class. Depois disso, adicionaremos um título e parágrafo usando

e

Tag.

Html

Linuxhint

Borda da imagem

Agora, vá para CSS e aplique propriedade de imagem de fronteira ao contêiner criado.

Aqui, nós usamos “.fronteira”Para acessar a div criada no HTML. Em seguida, aplicaremos o “fronteira”Propriedade e defina os valores da fronteira como“30px" e "sólido”, Respectivamente. Na próxima etapa, usaremos o “imagem de fronteiraPropriedade e defina os valores de fonte, fatia, largura, início e repita como “imagem.jpg","50","30px","40px", e "redondo”. Além disso, atribuiremos o valor da propriedade de alinhamento de texto como “Centro”, Propriedade do tamanho de fontes como“50px”, E propriedade de cor como“RGB (3, 59, 7)”Para estilizar o cabeçalho e o parágrafo.

CSS

.fronteira
borda: 30px sólido;
imagem de fronteira: URL ('imagem.JPG ') 50 / 30PX 40px Rodada;
Alinhamento de texto: centro;
Size da fonte: 50px;
Cor: RGB (3, 59, 7);

Depois de implementar o código mencionado acima, vá para o arquivo html e execute -o. Como resultado, você verá a seguinte saída:

A imagem acima é dada indica que a propriedade de imagem de fronteira é implementada com sucesso.

Exemplo 2: Definindo uma imagem como borda com valores padrão de propriedade de imagem de borda

Neste exemplo, especificaremos apenas a fonte da imagem e conferiremos seu efeito na propriedade de imagem-border.
Aqui, vamos atribuir apenas a fonte da imagem como “imagem.jpg”Para a propriedade de imagem de fronteira. As propriedades restantes serão as mesmas, de acordo com o exemplo anterior.

CSS

.fronteira
borda: 30px sólido;
imagem de fronteira: URL ('imagem.jpg ');
Alinhamento de texto: centro;
Size da fonte: 50px;
Cor: RGB (3, 59, 7);

Saída

Aqui, podemos ver que a borda da imagem é colocada apenas nos cantos da div. É porque o “imagem de fronteira”A propriedade usa valores predefinidos para todos os parâmetros restantes.

Conclusão

O "imagem de fronteira”A propriedade é usada para definir a imagem como uma borda em torno de qualquer elemento HTML. Você pode definir valores diferentes da propriedade de imagem de fronteira para modelar a fronteira. Se você não especificar nenhum valores de seus parâmetros, a propriedade de imagem-border aplicará seu comportamento padrão. Neste artigo, explicamos como adicionar uma imagem como uma borda usando a propriedade de imagem de borda.