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