Embora exista outras soluções esta é a melhor alternativa, com certeza, em vez de utilizar um "quebra galho" ou imagens, agora nada disso é preciso, é só utilizar CSS3 e não precisa esperar mais tempo.
É isso mesmo, pode ser ultilizada atualmente, você pode fazer o teste, o único problema vem a ser o navegador, é necessário um navegador que utilize engine Gecko como o Firefox ( qualquer versão apartir da 3) ou Webkit como Google Chrome ou Safari, Opera apartir da versão 10.50, usando diferentes declarações , que veremos abaixo.
A versão do CSS3 ainda não foi finalizada,por isso para a propiedade funcionar no Firefox você deverá utilizar: -moz-border-radius; para funcionar em navegadores com a engine webkit: -webkit-border-radius.
Exemplo de declarações para o Firefox, Safari/Chrome e Opera:
.borda {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Poucos navegadores estão implementando a versão 3 do CSS, conforme o artigo passado, por isso não podemos utilizar a propiedade border-radius diretamente. Com o tempo, todos os navegadores suportarão a declaração oficial da W3C quando estiver pronta, eliminando a necessidade das declarações alternativas que são usadas por exemplo no Firefox, no Chrome e no Safari.
Outros navegadores, não se preocupe, simplesmente eles ignoram essa propriedade caso não a possam renderizar, então você pode utilizá-la tranquilamente, perdendo apenas parte do visual nos navegadores mais antigos.
O Internet Explorer não exibe bordas arredondadas, mas a Microsoft já anunciou o suporte à propriedade a partir da próxima versão 9 do navegador. Veja sobre o Internet Explorer 9 nos próximos artigos.
Pode-se arredondar todos os cantos ou um canto separadamente usando as seguintes declarações:
border-radius-topleft para o canto superior esquerdo
border-radius-topright para o canto superior direito
border-radius-bottomright para o canto inferior direito
border-radius-bottomleft para o canto inferior esquerdo
É isso mesmo, pode ser ultilizada atualmente, você pode fazer o teste, o único problema vem a ser o navegador, é necessário um navegador que utilize engine Gecko como o Firefox ( qualquer versão apartir da 3) ou Webkit como Google Chrome ou Safari, Opera apartir da versão 10.50, usando diferentes declarações , que veremos abaixo.
A versão do CSS3 ainda não foi finalizada,por isso para a propiedade funcionar no Firefox você deverá utilizar: -moz-border-radius; para funcionar em navegadores com a engine webkit: -webkit-border-radius.
Exemplo de declarações para o Firefox, Safari/Chrome e Opera:
.borda {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Poucos navegadores estão implementando a versão 3 do CSS, conforme o artigo passado, por isso não podemos utilizar a propiedade border-radius diretamente. Com o tempo, todos os navegadores suportarão a declaração oficial da W3C quando estiver pronta, eliminando a necessidade das declarações alternativas que são usadas por exemplo no Firefox, no Chrome e no Safari.
Outros navegadores, não se preocupe, simplesmente eles ignoram essa propriedade caso não a possam renderizar, então você pode utilizá-la tranquilamente, perdendo apenas parte do visual nos navegadores mais antigos.
O Internet Explorer não exibe bordas arredondadas, mas a Microsoft já anunciou o suporte à propriedade a partir da próxima versão 9 do navegador. Veja sobre o Internet Explorer 9 nos próximos artigos.
Pode-se arredondar todos os cantos ou um canto separadamente usando as seguintes declarações:
border-radius-topleft para o canto superior esquerdo
border-radius-topright para o canto superior direito
border-radius-bottomright para o canto inferior direito
border-radius-bottomleft para o canto inferior esquerdo
Eu testei no Firefox vejam o resultado:
o CSS 3 veio pra facilitar mesmo !
ResponderExcluir