Bordas Arredondadas com CSS3 (Border-Radius)

Oi pessoal passando para deixar um rápido tutorial da breve série sobre CSS3, vou falar sobre uma boa parte do CSS3 e mostrar usa utilização com aplicações práticas. O primeiro feito por mim aqui no site foi o efeito de transição. Hoje vou falar sobre o Border-Radius, que é nada mais nada menos que bordas arredondas que podem ser utilizadas tanto em imagens quanto em backgrounds em cores.

Veja o Exemplo:

1° Passo: Código CSS3

Vá em "Design" > "Editar Html" > e procure por:

]]></b:skin>
Acima dele coloque o Código Abaixo! Como podem ver eu adicionei uma borda de 10 pixels a ele porem você pode alterar.

#border-radius{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Obs: Este é apenas um exemplo o id criado é totalmente ilustrativo, você deve apenas prestar atenção ao que está em itálico.

2° Passo: Aplicando o Efeito

Para inserir o efeito basta você por o id contido na div criada no 1° passo.
<img id="border-radius" src="LINK DA IMAGEM AQUI" />

Dúvidas? Comente!!