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:
.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);
}
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
Fod@ são os 5kb pra gambiarra do IE hahaha… mas valeu pela dica
Cara, valew pela dica! Vou testar aqui, abç!
Não funcionou n
nem o demo funcionou!
Funciona sim, normalmente!
Pode funcionar no IE6 e IE7, mas no IE8 não funciona. Inclusive no site fala que não roda em IE8.
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.
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
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 */
}
Não funciona no IE 8 =\
fico uma porcaria =/
Pingback: Usando border-radius no IE « Marcelo Torres
Falei IE eh um lixo nao adianta negocio eh soh no PGN pa essa merda!
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
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
Pingback: Закрукругление углов используя только CSS
Fino d+, funciona beleza, obrigado salvou a patria.
Obs: o que vamos fazer o IE? da vontade de desistir de programar…
Programar ? css/xhtml não eh programação ;s e sim desenvolvimento
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.
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
Pingback: CSS3Pie – CSS3 no IE | Marcelo Torres
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????
Olá Leandro,
Dê uma olhada no post sobre o CSS3Pie – http://www.marcelotorresweb.com/css3pie-css3-no-ie/ – ele é mais completo.
Excelente!!
Completo mesmo.
Parabéns…
Na real, o arredondamento de cantos funciona no IE8 e IE9. Para a propriedade “border-radius” ser chamada basta declarar a tag
ou invés de . Pelo menos é isso que explica o site http://msdn.microsoft.com/pt-br/library/gg589503(v=vs.85).aspx
Eu testei e funcionou.
Só pra corrigir: ao invés de declarar a tag “html”, declare “!DOCTYPE html”.
http://css3pie.com/download-latest
baixem o PIE.htc.
no css do seu elemento que tiver as bordas, coloque:
behavior: url(PIE.htc);
;)
Muito bom, valeu.
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
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!
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
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
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?
Não funciona, tem outra solução???????????
Tem isso -> http://www.marcelotorresweb.com/css3pie-css3-no-ie/
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
_____________________________________________________________
-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?
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?