Borda arredondada (rounded corner) ou border-radius em CSS é uma técnica amplamente utilizada em sites. Mas devido a velha ladainha de ter que fazer “funcionar” no IE, vez ou outra temos que recorrer a soluções alternativas. E, sempre que busco (falo por mim) uma solução de implementação para isso, sei que não vai ser possível de usá-la devido às limitações do IE. Ainda assim me faço essas três perguntas:

  1. Dá pra implementar usando somente CSS e algumas poucas imagens ou é necessário Javascript?
  2. Se for por CSS+imagens, funciona direitinho no IE?
  3. Se for por Javascript, qual o resultado quando eu o desabilito?

Sem fazer qualquer menção ao CSS3 e seja qual for o método de implementação, sempre coloco o conceito de Graceful Degradation em primeiro lugar nessas situações. Ou seja, se sem a borda arredondada meu layout não perder muito em detalhes, ótimo. Caso contrário tenho que repensar o projeto.

Voltando à solução, de todas as que já encontrei na internet, essa é de longe a mais prática, rápida e leve de implementar. Além de, claro, funcionar em todos os browsers (conheça as limitações mais abaixo).

Drew Diller criou uma biblioteca javascript chamada DD_roundies voltada exclusivamente para o IE que é uma mão-na-roda. Sua solução pode não agradar a todos justamente por ser em javascript, mas, como eu disse, é muito fácil de implementar. E, se você não quiser usar hacks proprietários (-moz-border-radius, -webkit-border-radius e outros) pode usar essa solução também para todos os outros browsers, livrando seu código CSS dos validators.

Solução

Baixe uma cópia do DD_roundies (este é um arquivo zipado contendo as versões compressed e uncompressed), e adicione as linhas abaixo no cabeçalho de sua página HTML:

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
    //somente para o IE
    DD_roundies.addRule('.borda', '10px');
    //variando os raios, somente para o IE
    DD_roundies.addRule('.outraborda', '10px 5px 3px');
    //true (sem aspas) = IE + todos os outros browsers
    DD_roundies.addRule('.bordamenor, img, input, span', '5px', true);
</script>

Até 3 argumentos separados por vírgula podem ser declarados:

  • Uma string representando o(s) seletor(es) CSS (obrigatório);
  • Uma string representando o(s) raio(s) da borda (obrigatório);
  • Um atributo booleano (true/false) indicando se será aplicado só para IE (false, por padrão) ou para todos os browsers (true) (opcional).

exemplos de bordas arredondadas exibindo os parâmetros para 1, 2, 3 ou 4 cantos

A exemplo da 2ª linha do script, onde mais de um raio de borda foi declarado, vale lembrar o seguinte:

  • 1 atributo configura todos os quatro cantos;
  • 2 atributos configuram os cantos superior-esquerdo/inferior-direito e superior-direito/inferior-esquerdo;
  • 3 atributos configuram os cantos superior-esquerdo, superior-direito/inferior-esquerdo e inferior-direito;
  • 4 atributos configuram os cantos superior-esquerdo, superior-direito, inferior-direito e inferior-esquerdo.

Limitações

  • Não deve ser aplicado à tag <body>
  • Evite também aplicar nas tags <table>, <tr>, <td>, <select>, <option> e <textarea>
  • O script não aceita o parâmetro background-position:fixed;
  • Elementos <img /> “fixos” devem assumir visibility:hidden; e, assim, se tornar não-clicável.
  • <input type="image" /> também não suportam o script. Estes com imagens PNG devem assumir visibility:hidden;
  • Nos browsers webkit (Safari e Chrome) a borda pode não arredondar caso o border-radius tiver valor maior que o valor de preenchimento (padding) do elemento.
  • O IE8 beta 2 fica extremamente lento e some com imagens de fundo (background images)

Browsers testados

Segundo o autor essa solução foi testada nos IE6 e IE7, Firefox 3.0.x, Safari 3.1.2, Chrome 1.0 e já funciona no Opera 10.x. Já o IE8 suporta parcialmente, além de ficar extremamente lento.

Para demonstração veja os exemplos no site do autor.