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

3 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.

Other Links to this Post

RSS feed for comments on this post. TrackBack URI

Leave a comment