Sergiius Blog´s

Usando border-radius no IE

Para aqueles que odeiam o IE (como eu!) e ficam muito chateados quando precisam fazer aquela borda arredondada nos campos de texto e acabam tendo que usar imagens, porque a !@#$ do IE 6, 7 e até o 8 não aceita essa nova propriedade do CSS 3, agora podem ficar tranquilos, o pessoal do site http://www.htmlremix.com, desenvolveu um arquivo .htc para resolver isso:

Assim como para Safari, Chrome e Firefox usamos, por exemplo:

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}

Para usar no IE basta chamar no CSS o arquivo .htc

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

Não esqueça de declarar a propriedade “real” border-radius e seu valor, senão o resultado será diferente.

O demo e o arquivo .htc você pode baixar neste link:
http://curved-corner.googlecode.com/files/border-radius-demo.zip

Visite o link – http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Parabéns para o pessoal do HtmlRemix

Alguns sites com dicas sobre CSS:

Gerador de cantos arredondados
http://border-radius.com/

CSS: border-radius and -moz-border-radius
http://www.the-art-of-web.com/css/border-radius/

Curso CSS – [ Usando o border-radius ] A la carte
http://www.brasilhightech.com.br/2010/02/curso-css-usando-o-border-radius-la.html

Desenvolvimento WEB | admin | 16 de março de 2010 17:17

7 Comentários

By Renato, 6 de maio de 2010 @ 14:58

NÃO FUNCIONA!!! Baixei os demos, coloquei no meu site e NÃO FUNCIONA??? As divs desaparecem!
By Renato, 6 de maio de 2010 @ 15:36

FUNCIONA SIM!!!
Achei o motivo, o conteiner de fora tem q conter esta css ( .rel )

.rel {
position: relative;
z-index: inherit;
zoom: 1; /* For IE6 */
}
By Danilo, 23 de agosto de 2010 @ 9:27

Funciona sim…
muito obrigado.
By Tulio, 6 de outubro de 2010 @ 19:43

PELO AMOR!
algum site que hospede .htc gratuitamente?
By rodrigo, 19 de novembro de 2011 @ 19:17

cara vc deu uma ajudou muito!!! valeu abraços
By andre, 5 de janeiro de 2012 @ 11:58

Girei girei, apliquei em uma div a class .rel e nada feito.. engraçado que o demo funciona, no meu site não. Algum help ?
Coloquei o .htc em todas as pastas do projeto, para evitar que o css chame de local diferente. E nada feito.
By João Taboada, 5 de janeiro de 2012 @ 14:21

Bom, consegui aqui. Usei z-index:1; na layer container e na layer que vai receber o border-radius, usei z-index:2;. Desta forma deu certo.