Como agregar bordes directamente a las imagenes..

Categorías:

Para muchos es indispensable usar bordes en sus imagenes para que estas pueden tener un toque mas profesional y llamativo, pero que sucede cuando no entendemos nada sobre CSS y lo queremos hacer de una forma mas entendible y practica..

Esto es muy sencillo y funciona perfectamente en Internet Explorer 7 y Firefox, se trata de un código que se agrega directamente a las imagenes sin tocar en lo mas mínimo el código en CSS..

Haremos una pequeña prueba.. supongamos que queremos una imagen con un borde solido y de color verde..

Lo que haremos sencillamente es agregar este código en donde queramos colocar la imagen..

codigo

<img style="border: #008000 5.5pt solid" src="urldelaimagen" width=250 height=250 alt="nombredelaimagen">


nombredelaimagen

Los parámetros que podemos modificar los he marcado con color rojo, son estos:

El color del borde, este se representa con el numero decimal especificado en el código, en este caso verde #008000..

El tamaño del borde mediante el parámetro 5.5pt, este valor podemos modificarlo por uno mayor o menos, depende del estilo que le queramos dar..

El parámetro solid, lo cambiaremos por los diferentes estilos que existen para los bordes:



Eso seria todo en cuestión del borde, pero no olvidemos a widht y height que son el ancho y el alto de la imagen, como tampoco a alt que agrega un nombre a la misma..

Un ultimo ejemplo.. A continuación pondré una imagen con un borde doble, y como color de borde agregare un color rojo, el código seria el siguiente..

codigo

<img style="border: #c00000 5.5pt double" src="urldelaimagen" width=250 height=250 alt="nombredelaimagen">



El resultado seria este..

nombredelaimagen


Y eso seria todo, como pudimos observar agregamos bordes a nuestras imagenes sin utilizar CSS, solo un simple código agregado directamente sobre la imagen :)..


Entradas relacionadas

Imagenes en Blogger (parte 1)
Icono en la barra de navegación
Dar estilo a las listas con CSS
Insertar archivos SWF en Blogger
Cursor personalizado en CSS..

Publicar un comentario