Borda redonda nas imagens + Com opacidade

Yo minna-san!!! Hoje trago mais um tutorial, de como colocar bordinhas arredondadas nas imagens do blogger, essa post foi em pedido de Isabelle, dona do blog Galaxy Unicorn (não esqueçam de fazer uma visitinha). Mas agora vamos ao tutorial do dia, vou mostrar como adicionar as bordas, e depois com opacidade.

1. Vá ate seu  HTML e procure por ]]></b:skin>, e acima dele adicione esse código:

Códigos

.post img{-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; }

Onde esta escrito: radius: 8px; e o tamanho das bordas, quanto maior o numero, mais redondinho vai ficar, todos devem ficar em tamanhos iguais para ficar redondo. Agora é só salvar!

2. Se deseja usar com opacidade, coloque então esse código acima de ]]></b:skin>, ele já esta prontinho é só adicionar:

Códigos

.post img{-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; -webkit-transition-duration: .20s;filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.70;}
.post img:hover{filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;-webkit-transition-duration: .20s;}

A parte que esta em itálico, e a opacidade e o mesmo código que mostrei a cima de bordas apenas acrescentei o efeito, então não precisa usar os dois que mostrei apenas um. Bom espero que tenha ajudado. Beijokas e ate a próxima post. ^^