Imagens redondas quando passar o mouse

Oi gente!
Esse tutorial, pouca gente conhece. Então irei ensinar.
Os créditos vão ao Cherry Cupcaskull, pois foi a dona que fez o código.
O efeito é o seguinte: Sem o mouse a imagem fica com bordas arredondadas, e quando passa o mouse ela fica em círculo. Aqui vai uma imagem do meu outro blog:

Tutorial:
Vá no HTML do seu blog, aperte CTRL F e procure por  ]]><b:skin>.
Acima de ]]><b:skin>, cole o seguinte código:

.post img {
-webkit-transition-duration: .50s;
border-radius: 10px 10px 10px 10px;
}
.post img:hover {
-webkit-transition-duration: .50s;
border-radius: 200px 200px 200px 200px;
}

Beijinhos, Luh