Arredondando borda de imagens usando CSS

Olá leitor(a), hoje eu vou mostrar um código e explicar como colocar as imagens que você usa em seu site com bordas arredondadas. Não é necessário alterar a imagem ou editar em qualquer editor reconhecido no mercado. Basta usar uma linha de código em CSS pronto, sua imagem terá bordas arredondadas.

O código no geral é simples, não precisa de programar usando linguagem de programação, basta usar HTML e CSS.

Geralmente a sua imagem tem cantos quadrados e para fazer com ela fique arredondada e bonitinha, você tem que editá-la, colocando borda branca e ao mesmo tempo fazendo um contorno. Depois de todo esse trabalho, é necessário salvar e mandar para o servidor. Esse método é bem antigo perto do que temos hoje, o CSS está ficando poderoso para fazer algumas coisas que não tinhamos antes. O código que vou mostra usa a propriedade Style da imagem. 

A única desvantagem em relação a esse comando é que o IE 9 ainda não utiliza os padrões HTML5 informados pelo W3C, empresa que padroniza a web e o HTML5. Por isso que código não funciona no IE 9, acredito que no IE 10 funcione perfeitamente.

Listagem 1 – Código HTML

Note que na listagem 1, o código mostra uma imagem e no final existe a propriedade style com o comando border-radius de 10 pixels. Esse valor de 10 faz com que a borda fique levemente arredondada, caso queira aumentar o tamanho dessa borda arredondada, então aumente esse valor. A figura 1 mostra a imagem com bordas.