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:
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" />Puedes manipular el código a tu antojo, solo recuerda cambiar lo que te detallo a continuación:
- border: 1px solid; define el borde y el ancho del mismo.
- color: black; define el color del borde, en este caso es negro.
- src="URL" define la imagen a utilizar, debes remplazar URL por la url de tu imagen.
- width="336" define el ancho de la imagen
- height="280" define el alto de la imagen
- 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í:
[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.