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

< img src="imagem.jpg" alt="minha figura" style="border-radius: 10px;" / >

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.

Figura 1 – Bordas arredondadas

Note que a imagem ficou arredondada levemente. Mudando esse valor de 10 para 20, a borda fica mais arredondada. Veja na figura 2.

Figura 2 – Borda mais arredondada.

É interessante saber e estudar o que o HTML5 e CSS estão fazendo hoje em dia. Pode facilitar muito a vida dos programadores e designers. Bom, eu fico por aqui e espero ter ajudado nessa parte. Qualquer dúvida por entrar em contato pelo site www.mauriciojunior.org.