Resolvi traduzir parte do tutorial, sobre as novas especificações do CSS3, e explicando o código detalhadamente.

A observação importante que tratarei neste caso é de que só funciona os códigos no Firefox versão 3 em diante ou no Safari, pois utiliza como engine de interpretação de hipertexto o webkit.

Infelizmente não obtive êxito com o IE, mas em breve creio que deverão haver correções a respeito.

Bom vamos a primeira opção de criarmos bordas arredondadas:

[sourcecode language='css']

.borda {

background-color: #666;
color: #fff;
line-height: 20px;
width: 200px; background-color: #666;
padding: 10px;
-moz-border-radius: 10px;
}
[/sourcecode]

Referencie em um parágrafo em seu html como o exemplo abaixo:

<p class=”borda”>CSS3 – Borda Arredondada</p>

O Resultado que você irá obter será o seguinte:

Agora vamos a explicação do código:

background-color: #666;

Esta linha Define a cor do plano de fundo de sua borda.

color: #fff;

Esta Linha Define a cor do Texto.

line-height: 20px;

Aqui é definida a largura da linha da borda.

width: 200px; background-color: #666;

Aqui define a largura da borda.

padding: 10px;

Define a altura da borda.

-moz-border-radius: 10px;

Eis aqui a tag mais importante, pois aqui esta referenciando que a borda seja arredondada (border radius), mas atentem ao “-moz-”, justamente este comando caracteriza criar uma borda arredondada no firefox.

Agora também podemos criar bordas com efeito gradiente com muita facilidade:

<style>
.box{
border: 8px solid #000;
-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
width:400px;
}
</style>

Coloque em seu html um tag assim:

<p class=”box”>TESTE EM BOX GRADIENTE</p>

O Resultado que você irá ter é o seguinte:

Agora vamos a explicação do código:

A primeira linha define o contorno da borda, a segunda linha define as cores da linha de baixo da borda (bottom), a terceira define as cores da linha de cima (top), a quarta define as cores do lado esquerdo(left), a quinta as cores do lado direito(right) e por fim a última linha define a largura do comprimento do box.

Atentem ao prefixo “-moz-” que serve para ser interpretado pelo mozilla, assim como também no css3 existe o webkit, utilizado no Safari!!!

Vimos que o css3 veio com muito mais recursos para nós desenvolvedores, facilitando nossa vida e ampliando nossas possibilidades!

O material original pode ser encontrado aqui.

Do mais agradeço a visita e espero ter sido útil.