-->
Código HTML para poner borde a imagen

Código HTML para poner borde a imagen



Agregar borde a imagen html

La forma más sencilla que se suele usar para poner borde a una imagen, es por medio de photoshop o de paint, pero para ello se debe editar la imagen en aquellos programas desde nuestro computador. Esto se lo puede hacer el mismo momento en que se le da las dimensiones apropiadas a dicha imagen.

Pero al hacer esto (salvo que tengas un formato ya establecido para las imágenes de tus post) suele pasar que, cuando tenemos que utilizar algunas imágenes para un solo artículos los bordes casi siempre no son iguales, ya sea en ancho o en color.

Agregar borde a imagen html

Por otro lado, para ahorrar el trabajo de maquetar una imagen desde el ordenador, se puede crear un borde a la imagen desde el propio código fuente, es decir, un código html que le dará el borde deseado a tus imágenes dentro del articulo. El resultado seria el siguiente:


Agregar borde a imagen html

Colocar borde a una imagen html

El código en si no es más que dar estilos predefinidos a la etiqueta img, mediante el atributo style, con el cual le puedes poner bode y darle el color que quieras. aquí te dejo el código html para colocar borde a una imagen.


<img style="border: 1px solid; color: black;" src="URL" alt="descripción" width="336" height="280" />


Códigos HTML 100% Optimizados

Suscríbete y recibe directamente en tu email, los mejores códigos HTML que necesitas para editar tu página web.








Puedes manipular el código a tu antojo, solo recuerda cambiar lo que te detallo a continuación:

  1. border: 1px solid; define el borde y el ancho del mismo.
  2. color: black; define el color del borde, en este caso es negro.
  3. src="URL" define la imagen a utilizar, debes remplazar URL por la url de tu imagen.
  4. width="336" define el ancho de la imagen
  5. height="280" define el alto de la imagen
  6. alt="descripción" utilizado para colocar una descripción de la imagen

Cambiar color de borde imagen html

Para cambiar el color del borde en una imagen solo debes cambiar "color: black;" que es quien define el color del borde, como en este caso es negro, podemos decirles que sea rojo; "color: red;". quedaría así: 

Agregar borde a imagen html [Ejemplo con 3px de borde y de color rojo]

Si quieres colocar un color especifico, puedes usar el código del color en html que seria similar a este #9E3019; .

Como te puedes dar cuenta, el proceso para dar borde a una imagen en html, no es tan complejo. Solo debes saber que cambiar en el código y listo.

Ahora te toca a ti participar del post. ¿Conocias este método para poner borde a una imagen? ¿Cual método utilizas tu para poner bordes a las imágenes?

Te leo en los comentarios.




Publicado por: Vicente Espinoza

Puedo hacerlo yo para ti, porque no tienes tiempo ni ganas: ¡Contrátame Aquí!
O puedo explicarte como crear un sitio web completamente dinámico sin ser un experto en programación web. ¡Suscríbete Ahora!

Programa Mentoría 1&1 Únete Ya!

Comentarios: