Leo Balter, Web Standards, jQuery e Wordpress

Temos grandes browsers no mercado, infelizmente um dos mais utilizados é uma verdadeira pedra no sapato de quem tem que desenvolver para a web. Ainda mais quando falamos de cantos arredondados ou rounded corners

Existe um fato e existe uma solução!

O fato é simples: Internet Explorer não tem suporte nativo a cantos arredondados como os demais browsers, onde poderiamos simplesmente declarar:

div {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Não adianta, ao menos que você baixe uma versão beta do Internet Explorer 9, isso não vai funcionar nunca para as versões mais utilizadas: do 6 ao 8.

Uma das opções que muitos recorriam era utilizar imagens sobrepostas para simularem cantos arredondados. Uma trabalheira desgraçada.

Agora vamos para uma solução de apenas um arquivo e uma linha adicionada em nosso CSS.

Temos um arquivo simples que bastamos subir para nosso site e indicarmos ele com o behaviour. Trata-se do curved-corner onde podemos fazer o download em http://code.google.com/p/curved-corner/.

E assim fazemos a declaração do CSS:

div {
  position:relative;
  behavior: url(border-radius.htc);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Note que, diferente do background-image, o endereço (path) do arquivo apontado pelo behavior é relativo à página que está chamando e não mais ao arquivo CSS.

Logo, prefira caminhos absolutos aos relativos, ou seja, sempre que possível coloque o endereço completo (com http://) no url do behavior. Algo como:

div {
  position:relative;
  behavior: url(http://www.meusiteehsuperbacana.com/border-radius.htc);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Existem contras, porque nada no Internet Explorer é uma maravilha:

1. Pra cada item com borda, deve-se utilizar a declaração behavior
2. Toda vez que a página for aberta, o Internet Explorer só ativará o behavior após autorização do usuário para um controle ActiveX. O usuário pode suspeitar e negar, ou nem ver a mensagem sobre essa ativação.
3. Todos os elementos também precisam de ter o atributo position declarado no CSS, se ele ainda não tiver nenhuma position declarada, utilize position:relative;
4. Pode acontecer efeito louco em elementos nativamente inline
5. zoom: 1 pode resolver muitos dos problemas encontrados com essa utilização
6. normalmente não funciona com outros hacks de IE do mesmo tipo

No mais é isso, o arquivo possui 5KBytes e é cacheado no navegador, mesmo com várias declarações no CSS vai ser carregado uma única vez e seu IE terá finalmente cantos arredondados!