Artigos HTML e CSS CSS3 Bordas Arredondadas - Dica

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>
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.

Bordas arredondadas
Figura 1. Bordas arredondadas

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>
Listagem 2. Aumentando o volume da borda arredondada

Veja na figura 2.

Borda mais arredondada
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.