As imagens são a parte mais crucial das páginas da web que são usadas para tornar os sites mais atraentes e informativos. Além disso, os desenvolvedores da Web podem inserir vários tipos de imagens, como imagens de fundo, ilustradores e imagens de produto. Além disso, os usuários podem aplicar estilos diferentes a imagens, como definir limites em torno de uma imagem.

Este artigo vai afirmar:

• Como adicionar uma imagem em html?
• Como adicionar/inserir uma borda a uma imagem em html?
• Como adicionar/inserir uma borda a uma imagem no CSS?

Como adicionar uma imagem em html?

Para adicionar uma imagem em um documento HTML, siga as instruções listadas:

• Primeiro, utilize qualquer tag de título “

  " para "

  ”Para incorporar o título. Por exemplo, incorporamos o título do nível dois com a ajuda do “

  " marcação.

• Em seguida, insira um elemento "" junto com atributos "Class", "SRC" e "Alt".
• ““”A tag é usada para adicionar uma imagem a um documento HTML.
• O "aula”O atributo é utilizado para apontar a classe no CSS.
• ““src”É usado para especificar o URL ou a fonte da imagem.
• ““alt”Especifica um nome ou texto alternativo para a imagem:

Adicionar borda a uma imagem

Pode -se observar que a imagem foi adicionada com sucesso a uma página HTML:

Como adicionar/inserir uma borda a uma imagem em html?

Para adicionar uma borda a uma imagem no HTML, utilize o CSS em linha diretamente na fonte da imagem com a ajuda das instruções fornecidas:

• No "”Tag, especifique a“estilo”Atributo. O valor do "estilo" define as propriedades do CSS para estilizar o elemento definido.
• Para aplicar uma borda ao redor da imagem, use o valor do estilo “borda: 5px verde sólido;", onde "fronteira”É a propriedade CSS utilizada para adicionar o limite ao redor do elemento, de acordo com o estilo especificado:

Adicionar borda a uma imagem

Saída

Como adicionar/inserir uma borda a uma imagem no CSS?

Os usuários também podem adicionar uma borda a uma imagem em HTML usando CSS incorporado. Para adicionar uma borda fora da imagem utilizando o CSS, siga as etapas fornecidas.

Etapa 1: Cabeço de estilo em CSS
Primeiro, estilize o título utilizando o nome da tag “H2”E aplique as propriedades CSS abaixo mencionadas:

H2
Alinhamento de texto: centro;
cor azul;
Negrito;

Aqui:

• O "alinhamento de texto”A propriedade é utilizada para definir o alinhamento do texto.
• ““cor”Especifica a cor particular para o texto.
• ““Fonte”É usado para alocar o estilo para a fonte.

Etapa 2: Adicione a borda a uma imagem
Para adicionar uma borda ao redor da imagem, primeiro, acesse a imagem no CSS com a ajuda do “.IMG-container" aula. Em seguida, aplique as seguintes propriedades a ele:

.IMG-container
Altura: 400px;
tamanho de fundo: conter;
Largura: 350px;
borda: 7px RGB sólido (63, 11, 253);
Margem: 20px 150px;

A descrição das propriedades acima é a seguinte:

• ““fronteira”A propriedade é utilizada para especificar a borda ao redor do elemento.
• ““altura”É usado para definir a altura do elemento definido.
• ““tamanho de fundo”A propriedade CSS é utilizada para definir o tamanho do elemento.
• ““largura”Define o tamanho da largura de um elemento.
• ““margem”Especifica o espaço em branco ao redor do limite do elemento:

Pode -se notar que uma borda azul foi adicionada em torno de uma imagem.

Conclusão

Para adicionar uma borda a uma imagem em html, antes de tudo, adicione uma imagem usando o “" marcação. Então, o usuário pode utilizar o “estilo”Atributo dentro da tag“ ”e defina seu valor conforme os requisitos. Além disso, os usuários também podem usar o CSS incorporado para aplicar o “fronteira”Propriedade para uma imagem. Este post explicou o procedimento para adicionar a borda a uma imagem em html.