Como fazer uma imagem redonda com CSS

Uma outra técnica interessante que podemos fazer é a imagem redonda com CSS, então não precisaremos gerar novamente uma imagem no PhotoShop cortada para inserir nosso site, apenas com CSS podemos atingir este objetivo!

Este conteúdo está disponível também em vídeo:

Explicando a técnica:

Você já deve estar esperando uma grande mágica ou gambiarra para atingir este efeito, mas na verdade é tudo bem simples

Precisamos apenas adicionar um raio de borda equivalente a 50% da imagem, assim o CSS se encarregará de criar o efeito circular na imagem desejada

Perceba que o raio da borda se adicionado, por exemplo 5 pixels, já começa a arredondar os cantos da imagem, então quando dizemos que ele é metade de cada canto acabamos formando o efeito de círculo

Vamos ver na prática?

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

Código de como deixar a imagem redonda com CSS:

Código HTML da técnica de deixar a imagem redonda com CSS:

<img src="https://dummyimage.com/300x300/000/fff">

E veja aqui o código de CSS que nós utilizamos para executar o efeito:

img	{
    border-radius: 50%;
}

Resultado final:

Veja que com apanas uma linha conseguimos atingir nosso objetivo final, não é maravilhoso? haha

Imagine ter que gerar esta mesma imagem redonda toda vez que ela fosse alterada via PhotoShop, ou até lembrar de fazer né?

Ou se o formato dela fosse voltar a forma quadrada? Muita perda de tempo!

E claro que isso não se aplica só com imagens, podemos realizar isso com um quadrado formado por uma div, por exemplo.

dica: A figura necessita ser quadrada, se não teremos uma elipse!

A regra de CSS transforma um elemento quadrado em redondo, podemos resumir assim! 😀

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀