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-
Essa caixa fica melhor com cantos arredondados, não?

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

Gostou? Compartilhe!
Você também vai gostar de

Participe da discussão!


  • http://twitter.com/Leandertal @Leandertal

    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.

  • Rodrigo

    Cara, este blog já foi melhor…. está caindo o nível dos artigos…
    Mas parabéns pela iniciativa.

  • Hebert

    Manero, mas concordo com o Rodrigo!

  • Marcio B D A

    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.

  • Marcio B D A

    artigo corrigido.

  • http://cristurm.wordpress.com/ Cristina Sturm

    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! :]

  • http://librenz.blogspot.com Rafa Librenz

    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!

  • http://www.anjodigital.com AnjoDigital

    Bem bacana!!,,, não vejo a hora de virar um padrão aceitável e unviversal, pois será uma mão na roda!

  • http://www.rhamses.com.br Rhamses Soares

    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

  • http://twitter.com/kennedylucas Kennedy Lucas

    Muito obrigado!

    Obs: Morte ao IE!

  • Pingback: Cantos arredondados em todos os browsers - jQuery Corner | Blog do Wallace Silva

  • Augusto

    para arredondar todos os cantos com o mesmo tamanho é só colocar border-radius e sem o -webkit- funciona com o mozila e google chrome, comigo funcionou