Imagens redondas com CSS

Fala gurizada, tranquilo?

Está muito em alta colocar imagens em formato redondo, mas tem muita gente fazendo isso em editores gráficos. Não é proibido, mas além de dar um trabalhão, imagina se o Google+ tivesse que ter funcionários para ficar fazendo mascaramento nas imagens de perfil… não dá né?!

Existe uma forma de fazer isso cross-browser somente com o CSS. Podemos utilizar essa técnica em DIV’s, inputs, imagens, etc.

Bom, sabemos fazer que para fazer um arredondamento de bordas com CSS, precisamos utilizar a propriedade border-radius. A técnica consiste exatamente em aumentar o ângulo do border-radius até que forme um círculo (50%).

Mãos à obra!

Primeiramente vamos testar com um DIV. Para isso, crie um div como o HTML abaixo:

<div class="redondo">Jucabala</div>

Agora vamos estilizar esse DIV para que ele fique redondo.

.redondo {
   width: 200px;
   height: 200px;
   background-color: #000;
   color: #FFF;

   /* Agora a mágica */
   border-radius: 50%;
}

E agora com imagem…

<img src="http://www.lorempixel.com/300/300/people" />

Estilizando…

.redondo {
   /* Agora a mágica */
   border-radius: 50%;
}

Para treinar, experimente brincar com a pseudo-classe hover e transition… cria um efeito bem legal.
Postem seus resultados, outro dia eu posto um exemplo assim.

Abraço!