Imagens arredondadas com css

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 01 de junho de 2018

Um recurso muito interessante e que considero visualmente agradável, é a inserção de imagens arredondadas em páginas web, principalmente para fotos de pessoas.

Muitos pensam que para isto precisamos de conhecer um editor de imagens para cortar a foto da maneira certa. Mas existe uma maneira muito mais simples, usando diretivas CSS (Cascading Style Sheets).

Para começar, vou usar uma foto minha, no formato retangular:

Vamos agora usar o código abaixo para exibir a mesma imagem:

<img src=/imagens/rubens.jpg style="border-radius: 50%"></PRE>

E vejam o resultado:

Importante, este efeito se obtém através do arredondamento das bordas, ou seja, você só conseguirá um círculo perfeito se a imagem for quadrada. Se for retangular, a imagem ficará ligeiramente ovalada.

Referência: How to make rounded images with CSS