Efeito e Borda Fofa nas Imagens

Olá! Hoje vou mostrar para vocês como adicionar um efeito para deixar as imagens com a borda. É um efeito fofo, ao qual você pode adicionar cor e dar um formato arredondado que se "desfaz" quando o ponteiro do mouse pára sobre a imagem, pode ser aplicado a todas as imagens de um blog ou a apenas as que se escolher. Veja o efeito clicando Aqui!

                                     

-Para adicionar o efeito em todas as imagens: 

1.Acesse a área de edição de HTML do seu blog.
2.Procure por ]]></b:skin>
3.Cole acima disto esse código:

.post-body img {border-radius: 45% / 20%; /* Borda arredondada */box-shadow: 0px 0px 15px #f5abe5; /* Cor da Sombra */padding:0;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.post-body img:hover {border-radius: 0; /* Eliminar borda arredondada */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;cursor:pointer;}

-

4.Visualize e se estiver tudo certo, salve.

-Para usar apenas na imagem que você quiser:

1.Adicione o código anterior acima de ]]></b:skin>
 2.Troque .post-body img por .arredondado, e .post-body img:hover por.arredondado:hover
3.No HTML da postagem adicione isto:

<img class="arredondado" src="URL da Imagem" />

-

4. Visualize sua postagem e se estiver tudo ok, publique :3 
Espero que gostem. Se quiserem mais formatos de bordas e efeitos, visitem o site do autor deste tutorial. Esse foi o que achei mais fofo.
Beijus... Créditos: Reno Kawaii   |  Autor do Tutorial: Ciudad Blogger