Menu

Usando border-radius no IE

Para aqueles que odeiam o IE (como eu!) e ficam P… da vida, quando precisam fazer aquela borda arredondada e acabam tendo que usar imagens, porque a M… do IE não aceita essa nova propriedade do CSS, podem ficar tranquilos agora, o pessoal do site http://www.htmlremix.com, desenvolveu um arquivo .htc para resolver isso:

o modo de usar é muito simples:

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

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

IMPORTANTE: 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

e também visite o link – http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser – para mais informações e para dar parabéns para os caras :D

Até ++ pessoal

[lomadeewpro category=’3482′ keywords=’CSS, JQUERY’]

38 comentários em “Usando border-radius no IE

  1. Renato

    NÃO FUNCIONA. Peguei o DEMO coloquei no meu site e realmente não funcionou, faz desaparecer as DIV.
    Se alguém souber o motivo por favor postem, seria ótimo se fosse verdade.
    Porém parece q quer funcionar, mas não funciona.

    Reply
    1. Heronildes

      Cara, revisa o estilo e verifica se o caminho do Behavior está correto, e claro , nao esqueça de colocar o .htc na pasta, senão nao vai funcionar nem com reza braba.

      abçz

      Reply
  2. Renato

    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 */
    }

    Reply
  3. Pingback: Usando border-radius no IE « Marcelo Torres

  4. Elson

    Funciona uma beleza!!

    Quebrei cabeça mas fiz funciona, e a soluçao é bem simples:

    A url do arquivo “border-radius.htc” , nao pode ser relativo a pasta do css, e sim do html. ex:

    Se vc colocou o arquivo “border-radius.htc”
    dentro da pasta css, use a url referente a pagia que vai usar a css.

    isso seria o link que o html usa certo?

    entao dentro da pagina css use assim:

    behavior: url(css/border-radius.htc);

    Veja que mesmo o arquivo .htc estando dentro da mesma pasta do .css, vc deve colocar o caminho da pasta como se ele na mesma pasta do seu html.

    Nao sei se fui claro mas qualquer duvida so perguntar

    Reply
    1. rafael

      boas….eu estou a ter esse problema com o arquivo que nao funciona…. eu coloquei da seguinte forma:

      isto é uma parte claro xD

      .menu2 li a:hover{
      color:#FFF;
      text-decoration:none;
      background:url(current-bg.gif) top left repeat-x;
      -webkit-border-top-left-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      behavior:url(border-radius.htc);
      }

      gostaria de ajuda…e alguma coisa tambem ajudo….ja gora digo que estou tambem na parte de web design

      Reply
  5. Pingback: Закрукругление углов используя только CSS

  6. Adelmo

    Fino d+, funciona beleza, obrigado salvou a patria.

    Obs: o que vamos fazer o IE? da vontade de desistir de programar…

    Reply
      1. Rafael Pinho

        Eu vou testar aqui… Se não funcionar eu vou bloquear o acesso a diversos recursos do site pelo IE.

        A Microsoft tá fracassando TOTAL com esse lixo de navegador.

        Reply
        1. rafael

          Isso que eu coloquei em cima funciona perfeitamente

          depois voce pode testar outra coisa

          nao sei se esta interessado saber..se sim contacte me.

          se tiver algum problema diga me

          orbigado

          Reply
  7. Pingback: CSS3Pie – CSS3 no IE | Marcelo Torres

  8. Leandro A.

    Funciona Sim…

    É como o elson falou:
    O arquivo e relativo a pagina.

    Mass…
    Com Bg color transparente não funfa.
    fica a borda mas a cor sólida!

    Alguma Solução????

    Reply
  9. Valdir

    Cara isso ai ficou muito bom .. no meu funfou direitinho eu tbem odeio essa p…ria do IE alias eu ODEIO o Ruindows por completo, mas como preciso ter uma maquina com essa M…. instalada para fazer testes dos meus sistemas, sites e servidores. esse post me ajudou muito

    Vlw

    Reply
  10. Luiz Carlos Bartolossi

    Pessoal, tem uma solução mais simples: Use CSS3 para todos os cantos arredondados.
    Para browsers que não suportam, use http://jquery.malsup.com/corner/ .

    É só instalar o plugin e colocar o código abaixo dento do

    $(function() {
    if($.browser.msie && $.browser.version.substr(0,1) <= "8") {
    $("ul#MenuPrincipal").corner("7px");
    $("ul#MenuPrincipal li a").corner("5px");
    }
    });

    Para sombra, a mesma coisa. O plugin é esse: http://code.google.com/p/dropshadow/downloads/detail?name=jquery.dropshadow.js&can=2&q=

    Abraço!

    Reply
  11. rafael

    Eu tambem tenho uma solução para isso que por acaso funcionou muito bem, e funciona melhor do que o arquivo htc….o arquivo htc nao funciona no linux visto no firefox….eu vou dar uns links pra voces verem e depois me dizerem alguma coisa obrigado..

    http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/
    http://davidwalsh.name/css-rounded-corners
    http://www.smileycat.com/miaow/archives/000044.php

    o que resultou melhor foi :

    http://davidwalsh.name/css-rounded-corners

    depois comentem se fz favor

    Reply
  12. Danillo

    Não funciona quando você está utilizando a seguinte regra CSS no mesmo elemento que quer ter a borda arredondada:

    div.minhaClasse {
    /* A declaração abaixo não vai funcionar */
    opacity: 0.5;
    filter: alpha(opacity=50); /* Para IE8 e anteriores */

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

    background-color: #BABACA; /* Adoro essa cor */
    height: 250px;
    width: 300px;
    }

    Independetemente disso o excelente trabalho dos caras merece uma paçoca :P

    Reply
  13. Pietrus

    Beleza galera até agora ta tudo dando certo com as brodas, so que agora eu gostaria de deixar os inputs, select, textareas, o formulario em geral com as bordas redondas.

    Fiz o mesmo metodo para os inputs e em todos funcionaram menos no IE usando o behavior: no IE não funcionou. Como faria para que no IE também ficasse redondinho os campos de fomrulario?

    Reply
  14. Lea

    Oi!
    Eu tenho uma pergunta, mas não tem nada ver com propriedades “border-radius”.
    Se o dono desse blog é o desenvolvedor dele, gostaria de saber como conseguiu colocar o “dropdown menu” no menu superior. Se não me engano esse teme de WordPress é “twentyeleven” e ele não tem isso por padrão.
    (desculpe postando no lugar errado). Se decidir responder – me responde no E-mail e apague esse post.
    Obrigado
    Lea

    Reply
  15. Diego

    _____________________________________________________________
    -webkit-border-radius:10px; /* Safari e Chrome */
    -moz-border-radius:10px; /* mozila */
    border-radius: 10px; /* outros */
    ____________________________________________________________
    background-image: -moz-linear-gradient(top,#F90 0px, #F00 70%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #CCC), color-stop(0.6, #F00));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#FF0000);
    -ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#FF0000)”;
    _____________________________________________________________
    o background estoura fora das bordas como resolver isso?

    Reply
  16. Jefferson

    Meus amigos!

    Baixei o border-radius.htc e o PIE.htc coloquei na pasta do css. Testei um depois o outro e mesmo assim não funciona no fdp do IE.
    Já especifiquei todo o caminho no behavior no css e nada.

    Ficou assim
    .borda{
    border: solid; border-width:1px;-moz-border-radius-bottom-right: 5px; -webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px; behavior:url(E:\\estilos\css\PIE.htc);}

    ou

    .borda{
    border: solid; border-width:1px;-moz-border-radius-bottom-right: 5px; -webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px; behavior:url(E:\\estilos\css\border-radius.htc);}

    What is going on?

    Reply

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">