Uma das funções mais aguardadas do CSS3 sempre foi o border-radius, que é nada mais, nada menos, a possibilidade de criar bordar arredondadas.
Este recurso beneficiará e facilitará a vida de todo mundo. Imaginem um mundo sem criar diversas imagens de background para arredondar bordas em elementos de seu site, ou, para os usuários de tabela, deixar de criar estruturas complexas para esses fins.
Pois bem, este recurso já esta disponível nos navegadores mais novos, e isto é algo realmente bom, pois podemos começar a nos acostumar com esse recurso, e, em um sonho mais distante, podemos acostumar a internet aos novos navegadores.
Infelizmente um dos navegadores mais utilizados da internet, como sempre, ainda não integrou esse (e diversos outros) recursos do CSS3. Claro que estou falando do nosso amigo o Internet Explorer. Porém há rumores de que a versão 9.0 do navegador da Microsoft trará já o CSS3 em seu renderizador.
Então por hora, vamos falar, dar exemplo e ensinar a usar o border-radius.
Exemplos usando o -moz-border-radius
O -moz-border-radius é o comando que fará o border-radius funcionar no Firefox ou em outro navegador da Mozilla.
Imagem dos exemplos usando o -moz-border-radius
Até o Firefox 3.5 só são suportados cantos redondos (não elípticos), porém em versões mais recentes do Firefox curvas elípticas são agora possíveis.
Essa propriedade não pode ser usada, necessariamente, somente em boxes, mas em qualquer outro objeto HMTL.
Exemplos usando o -webkit-border-radius
O Webkit é o renderizador usados por diversos navegadores, dentre eles o Safari e o Google Chrome, e já à algumas versões desses navegadores a propriedade do border-radius está disponível.
Imagem dos exemplos usando o -webkit-border-radius
Esta é uma dica básica para quem está começando a descobrir os segredos do CSS3. Espero que tenham tenham gostado.
Fonte: Comunica Web
