Las imágenes son la parte más crucial de las páginas web que se utilizan para hacer que los sitios web sean más atractivos e informativos. Además, los desarrolladores web pueden insertar varios tipos de imágenes, como imágenes de fondo, ilustradores e imágenes de productos. Además, los usuarios pueden aplicar diferentes estilos a las imágenes, como definir límites alrededor de una imagen.

Este artículo indicará:

• Cómo agregar una imagen en HTML?
• Cómo agregar/insertar un borde en una imagen en HTML?
• Cómo agregar/insertar un borde en una imagen en CSS?

Cómo agregar una imagen en HTML?

Para agregar una imagen en un documento HTML, siga las instrucciones enumeradas:

• Primero, utilice cualquier etiqueta de encabezado "

  " a "

  "Para incrustar el encabezado. Por ejemplo, hemos incrustado el encabezado del nivel dos con la ayuda del "

  " etiqueta.

• A continuación, inserte un elemento "" junto con los atributos de "clase", "SRC" y "Alt".
• "La etiqueta se usa para agregar una imagen a un documento HTML.
• El "claseEl atributo se utiliza para apuntar la clase en CSS.
• "SRC"Se usa para especificar la URL o la fuente de la imagen.
• "alternativo"Especifica un nombre o texto alternativo para la imagen:

Agregar borde a una imagen

Se puede observar que la imagen se ha agregado con éxito a una página HTML:

Cómo agregar/insertar un borde en una imagen en HTML?

Para agregar un borde a una imagen en HTML, utilice el CSS en línea directamente en la fuente de la imagen con la ayuda de instrucciones proporcionadas:

• En el ""Etiqueta, especifique el"estilo" atributo. El valor del "estilo" define las propiedades de CSS para diseñar el elemento definido.
• Para aplicar un borde alrededor de la imagen, use el valor de estilo "borde: 5px verde sólido;", dónde "borde"¿Se utiliza la propiedad CSS para agregar el límite alrededor del elemento, de acuerdo con el estilo especificado:

Agregar borde a una imagen

Producción

Cómo agregar/insertar un borde en una imagen en CSS?

Los usuarios también pueden agregar un borde a una imagen en HTML usando CSS integrado. Para agregar un borde fuera de la imagen utilizando el CSS, pase por los pasos proporcionados.

Paso 1: Estilo encabezado en CSS
Primero, diseñe el encabezado utilizando el nombre de la etiqueta "H2"Y aplique las propiedades CSS mencionadas a continuación:

H2
Text-Align: Center;
color azul;
negrita;

Aquí:

• El "texto alineadoSe utiliza la propiedad para establecer la alineación del texto.
• "color"Especifica el color particular para el texto.
• "fuente"Se usa para asignar el estilo de la fuente.

Paso 2: Agregue el borde a una imagen
Para agregar un borde alrededor de la imagen, primero, acceda a la imagen en CSS con la ayuda del ".IMG-Container" clase. Luego, aplique las siguientes propiedades:

.img-continer
Altura: 400px;
tamaño de fondo: contener;
Ancho: 350px;
borde: 7px sólido RGB (63, 11, 253);
margen: 20px 150px;

La descripción de las propiedades anteriores es la siguiente:

• "bordeSe utiliza la propiedad para especificar el borde alrededor del elemento.
• "altura"Se usa para configurar la altura del elemento definido.
• "tamaño de fondoSe utiliza la propiedad CSS para establecer el tamaño del elemento.
• "ancho"Define el tamaño de ancho de un elemento.
• "margen"Especifica el espacio en blanco alrededor del límite del elemento:

Se puede notar que se ha agregado un borde azul alrededor de una imagen.

Conclusión

Para agregar un borde a una imagen en HTML, en primer lugar, agregue una imagen usando el "" etiqueta. Entonces, el usuario puede utilizar el "estilo"Atributo dentro de la etiqueta" "y establece su valor según los requisitos. Además, los usuarios también pueden usar el CSS integrado para aplicar el "borde"Propiedad a una imagen. Esta publicación ha explicado el procedimiento para agregar el borde a una imagen en HTML.