Bordas Arredondadas no novo | CSS3 |

Uma das novidades trazidas pelo CSS3 é que as bordas dos elementos HTML podem ser arredondadas.
Veja um exemplo com as #DIVs abaixo:

Lorem Ipsum

Lorem Ipsum

O código para bordas arredondadas como na caixa acima é bastante simples:

-Moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border: 1px solid #000;
border: 1px solid # 000;
padding: 10px;

A classe border-radius (destacada em vermelho) deve ser repetida dessas três formas para que possa funcionar em diversos navegadores. Mesmo assim, alguns navegadores mais antigos podem não aceitar a transformação.
Veja outros exemplos do que pode ser feito:

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Ainda existem outras formas de estilizar as bordas, vejam o código:

-Moz-border-radius: cima direita baixo esquerda;
-webkit-border-radius: cima direita baixo esquerda;
border-radius: cima direita baixo esquerda;

Modificando as partes em negrito (cima, direita, baixo, esquerda) por algum número inteiro você modifica a borda de cada lado do elemento.
Lembre-se de que os números devem ser iguais nas três linhas a menos que você queira que para cada navegador seja exibido uma borda diferente.
Vejamos agora um exemplo de como colocar o código na parte de estilos do seu blog. O código deve ser colocado entre as chaves e nesse caso, será usado como exemplo o código de estilo da #SIDEBAR:

#sidebar {
width: 200px;
padding: 5px;
border: 2px solid #99CC00;
-Moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

Ficou alguma dúvida? Não conseguiu? Precisa de ajuda? É só deixar um comentário.
Obrigado! 

Créditos:  Guia Blogger!