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.
<!DOCTYPE html>
<html>
<head>
<title>Bordas Arredondadas com CSS</title>
<style type="text/css">
img{border-radius: 10px;}
</style>
</head>
<body>
<img src="imagem.jpg" alt="minha figura" />
</body>
</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.
Note que a imagem ficou arredondada levemente. Mudando esse valor de 10 para 20, a borda fica mais arredondada.
<!DOCTYPE html>
<html>
<head>
<title>Bordas Arredondadas com CSS</title>
<style type="text/css">
img{border-radius: 20px;}
</style>
</head>
<body>
<img src="imagem.jpg" alt="minha figura" />
</body>
</html>
Veja na figura 2.
É 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.
