O border-radius é a mais antiga implementação de CSS3, e provavelmente por isso a mais comum. Este artigo é sobre como utilizá-la corretamente.
O que é Border-Radius?
Criar cantos arredondados sempre foi uma grande dificuldade para desenvolvedores. Em geral para implementar, tinhamos que alterar o código html inserindo divs inúteis ou na melhor das hipóteses, fazer uma caixa de tamanho fixo e jogar a imagem inteira no background, o que em muitos casos não é uma solução possível.
Para resolver especificamente esse problema foi criado o border-radius.
Como utilizar?
Para usar esta e outras possibilidades do CSS3 nós precisamos adicionar ao código extensões dos seletores específicas para cada navegador. Tenha em mente que isso é um recurso temporário. Quando o CSS3 entrar em vias de finalização isso não será mais necessário. E além disso seu código CSS (com essas extensões) não será mais válido segundo a W3C. Para os mais puristas talvez seja o caso de criar um arquivo extra só com essas modificações.
As extensões mais comuns são:
- Mozilla Firefox: -moz-
- Google Chrome e Safari: -webkit-
- Opera: -o-
- Konqueror: -khtml-
- e o famigerado Internet Explorer: -ms-
Então para gerar o exemplo acima precisamos do seguinte código css:
.teste {
background:#333;
border:1px solid #888;
width:450px;
margin:10px auto;
padding:0px auto;
text-align:center;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
Bugs e afins
Infelizmente até agora apenas Firefox/Safari/Chrome suportam border-radius. Existe um boato de que as últimas versões do Opera (ainda em estágio alpha) já suportam border-radius inclusive sem a necessidade de extensão. Porém o Internet Explorer não tem previsão alguma de aceitar extensões do CSS3. Ainda mais considerando que apenas no ano passado a microsoft lançou um navegador compatível com CSS 2.1. Então, se o canto arredondado for crucial para compreensão do site, você terá que usar o método antigo. Porém ser for apenas um detalhe, essa é uma ótima forma de recompensar quem usa navegadores mais atuais.
De forma geral: Seu site deve aparecer igual em todos os navegadores? A minha opinião é: não.
Um outro problema é que Firefox e navegadores baseados em webkit diferem quanto a especificação de cada canto arredondado.
Para definirmos cada canto no firefox, usamos o seguinte:
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
Já para Chrome e Safari:
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
E para os mais pessimistas, o estágio do border-radius na W3C ainda é de draft(rascunho). Ou seja tudo pode mudar (apesar de ser muito improvável… mesmo) e seu layout ficar quadrado denovo nos próximos navegadores.
Exemplos de site que utilizam border-radius
Fique por dentro de muito mais!
Assine nosso feed RSS ou seguia o Design Blog no Twitter para ficar sempre ligado nas novidades no mundo do design!
10 comentários
O pessoal da HTML Remix criou uma solução para usar cantos arredondados nos IEs da vida: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser.
Cara, este blog já foi melhor…. está caindo o nível dos artigos…
Mas parabéns pela iniciativa.
Manero, mas concordo com o Rodrigo!
Ops, só agora eu ví que a caixa com border-radius no meio do artigo não está aparecendo e por algum motivo os links do final foram parar no meio.
Bem… fora isso esse artigo é direcionando a iniciantes, mas de qualquer forma obrigado pelo feedback.
artigo corrigido.
Ah, não achei esse artigo ruim. Se levar em consideração que muitos iniciantes em CSS não sabem nem o básico de CSS2, apresentar o CSS3 é uma bela iniciativa.
E eu não sabia que era diferente nos navegadores a declaração de border radius pra bordas separadamente (topleft,topright etc). ;)
Obrigada pelo artigo! :]
Esse assunto é deveras interessante.
Mas porque será que amolam tanto pra colocar isso em funcionamento? Há anos ouço falar do border-radius e ele ainda não tá pronto… poxa!
Bem bacana!!,,, não vejo a hora de virar um padrão aceitável e unviversal, pois será uma mão na roda!
Mesmo que o IE seja essa droga de navegador que não aceita nativamente o border radius dá para fazer um “POG” para fazer ele rodar.
Na verdade é um método muito utilizado para fazer funcionar outras coisa s. São os arquivos “htc”, eles são scripts que tem uma função pre-definid, por exemplo: fazer funcionar png transparente no IE6.
O arquivo htc para fazer funcionar o border radius no IE6. IE7 e IE8 (não testei no IE9) pode ser baixado aqui. http://code.google.com/p/curved-corner/
Grande abraço
Muito obrigado!
Obs: Morte ao IE!
Regras
Antes de comentar, por favor atente-se as regras abaixo:
Os comentários neste artigos assim como em qualquer artigo deste blog não necessáriamente refletem a opinião dos autores e donos deste blog, como consta na Política de Privacidade e Uso deste blog.