poner bordes personalizados a una imagen

oKa ya tengo varios pedidos sobre este tuto sobre poner una imagen bajo la imagen para que el borde se vea personalizado es algo muy sencillito ya lo veran ^^

bien aqui el ejemplo de como se veria:

bien para empezar hay que seguir los siguientes pasos:

nos vamos a:

Diseno >> Edicion de Html >> Editar plantilla

y buscamos:

.post img {

y pegamos lo siguiente justo abajo de ese codigo

margin: 5px;
padding: 20px;
background:url(URL DEL FONDO O IMAGEN)repeat;
-moz-border-radius: 3em 1em;
}

en caso de no tener .post img { solo pega o agrega todo el codigo completo arriba de ]]></b:skin>


Quedaria asi:

moradito : que tan grueso sera el borde.
rosadito: la direccion de la imagen o tu fondo
naranja: la forma del borde


si quieres que tenga borde tu imagen con este ejemplo:

El codigo seria este:

.post img {
margin: 5px;
padding: 20px;
background:url(URL DE TU IMAGEN)repeat;
-moz-border-radius: 35px;
border-radius: 35px;
border: 1px dashed #BDBDBD;
}

Aqui lo unico que se agrego fu el borde que esta en rojo es tu eleccion si quiers ponerlo o no o.o


Aqui una guia de las formas de los bordes

Borde 1


-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

BOrde 2


-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

Borde 3


-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

Borde 4


-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

Borde 5


-moz-border-radius: 35px;
border-radius: 35px;


espero les haya gustado el tuto y dejen sus coments okis ^^