CSS3 Bordas Arredondadas

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.

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.

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.

CSS3 Bordas Arredondadas - Dica

Veja nessa dica como criar o efeito de bordas arredondadas usando CSS3.

Artigos relacionados