Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.
Com os recursos que temos atualmente, podemos fazer cantos arredondados diretamente pelo CSS para os browsers Firefox e Safari, graças a propriedades exclusivas de suas engines.
O CSS3 promete unificar tudo isso introduzindo a propriedade border-radius mas, até o momento, a melhor opção que temos é o DD_roundies, um script que possibilita fazermos bordas arredondadas sem imagens para os browsers mais populares: Internet Explorer 6, 7 e 8 além de Firefox e Safari (Google Chrome).
Explicação
Faça download do script DD_roundies e coloque o arquivo junto com o HTML. Caso o arquivo baixado esteja na mesma pasta que o arquivo HTML inclua esse js em seu HTML dentro da tag head:
... <head> <title>Exemplo</title> <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script> </head> ...
Agora para colocarmos canto arredondado em algum elemento siga o exemplo.
Coloque dentro da tag body uma div:
... <body> <div>Meu exemplo de canto arredondado</div> </body> ...
Logo abaixo do código que colocou antes no head, inclua também o código para fazer os cantos arredondados que desejar e um CSS para que veja o que fez:
...
<head>
<title>Exemplo</title>
<script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
<script type="text/javascript">
DD_roundies.addRule('div', '10px', true);
</script>
<style type="text/css">
div { border: 1px solid red; }
</style>
</head>
...
Esse código que colocou é apenas para fazer os cantos arredondados em qualquer div com um raio de 10 pixel e funcionar em todos navegados (true). Quando for usar em seu dia-a-dia mude conforme a necessidade, por exemplo:
...
DD_roundies.addRule('div.conteudo ol li', '20px', true);
...
ou assim, com cantos diferentes:
...
DD_roundies.addRule('div.topo .busca form', '20px 0 0 20px', true);
...
Essa ordem usada para deixar os cantos diferentes é a seguinte: Top-Left, Top-Right, Bottom-Left e Bottom-Right.
Veja o exemplo de pronto com cantos arredondados. Caso tenha uma dúvida, comente!
O interessante de usar essa técnica para todos os browsers (incluindo Firefox e Safari) é que mantemos nosso CSS limpo e sua aplicação mostrou-se muito eficaz, já que não se faz mais necessário o uso de imagens para fazer os cantos arredondados.
O único porém que percebi até o momento é no uso das bordas arredondadas para Internet Explorer 8, não mostrando a propriedade background-image caso utilizada.
34 comentários
ResponderLucas S disse:
Opa, que bom que o blog WS voltou a ativa! Não parem, por favor.
ótimo post! Como sempre o IE 8 sendo uma pedra.
Aline Ioavasso disse:
Não consegui fazer ele funcionar no ie6.
Diego disse:
Gente n consegui fazer, alguem pode me ajduar a fazer detalhadamente ?
Ademir disse:
Ai pessoal para funcionar no IE8 com backgorund usei esta tag.
O IE8 funciona como IE7.
Várias gambiarras pra funcionar na porcaria do IE.
Abraço!
Cantos arredondados no Internet Explorer (sem imagens) « Diretório Técnico disse:
[...] Fonte: http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/ [...]
Vinicius disse:
Opa!!! show de bola esse código… parabens e muito
obrigado pela força!!!
ocaccy disse:
Ola pessoal, estou fazendo o site http://www.sun-mall.jp e precisava fazer os cantos arredondados.
Voces salvaram o meu dia, muito agradecido.
Como fazer funcionar no IE sem dar mensagem de aviso amarela?
Abraços.
Ocaccy….
Rafael disse:
Caros amigos,
Tem uma outra forma de se fazer esses cantos arredondados sem imagem, só com html e css. é similar ao usado no igoogle. só não testei no ie6. mas vou postar o cod aqui… se alguem quiser testar ou melhorar (tenho outras variações como uma barra de titulo, mas não é nada que vocês não possam fazer)… galera funcionou tão bem aqui no trampo e a aceitação tbm foi mto boa… portanto eu nem tive coragem de validar mas se alguém puder….
cod:
css—
/* @author Rafael Lima
email: rlp1905@yahoo.com.br
site: em desenvolvimento.
*/
.RoundedCorner {
bbackground: ttransparent;
width:400px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
font-size:12px;
}
.RoundedCorner .b1, .RoundedCorner .b2, .RoundedCorner .b3, .RoundedCorner .b4,.RoundedCorner .b2Top, .RoundedCorner .b3Top, .RoundedCorner .b4Top,
.RoundedCorner .b1b, .RoundedCorner .b2b, .RoundedCorner .b3b, .RoundedCorner .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.RoundedCorner .b1, .RoundedCorner .b2, .RoundedCorner .b3,
.RoundedCorner .b2Top, .RoundedCorner .b3Top,
.RoundedCorner .b1b, .RoundedCorner .b2b, .RoundedCorner .b3b {
height:1px;
}
.RoundedCorner .b2, .RoundedCorner .b3, .RoundedCorner .b4 {
background:#FFFFFF;
border-left:1px solid #BDCAD8;
border-right:1px solid #BDCAD8;
}
.RoundedCorner .b1 {
margin:0 5px; background:#BDCAD8;
}
.RoundedCorner .b2,.RoundedCorner .b2Top {
margin:0 3px;
border-width:0 2px;
}
.RoundedCorner .b3,.RoundedCorner .b3Top {
margin:0 2px;
}
.RoundedCorner .b4,.RoundedCorner .b4Top {
height:2px;
margin:0 1px;
}
.RoundedCorner .RoundedCornerTitle{
padding-left:5px;
padding-right:5px;
padding-top:0;
padding-bottom:3;
display:block;
background:#FFFFFF;
border-left:1px solid #BDCAD8;
border-bottom:1px solid #BDCAD8;
border-right:1px solid #BDCAD8;
background:#D4E6FC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#224499;
font-weight:bold;
}
.RoundedCorner .RoundedCornerContent {
padding:5px;
display:block;
background:#FFFFFF;
border-left:1px solid #BDCAD8;
border-right:1px solid #BDCAD8;
}
.RoundedCorner .b2Top, .RoundedCorner .b3Top, .RoundedCorner .b4Top {
background:#D4E6FC;
border-left:1px solid #BDCAD8;
border-right:1px solid #BDCAD8;
}
=================== html =================
<div class="RoundedCorner">
<b class="b1"></b><b class="b2Top"></b><b class="b3Top"></b><b class="b4Top"></b>
<div class="RoundedCornerTitle">titulo</div>
<div class="RoundedCornerContent">
Lorem ipsum
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<br /><br />
<div class="RoundedCorner">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="RoundedCornerContent">
Lorem ipsum
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
Rafael disse:
@Rafael:
pessoal,
só para lembrar.. no css tem uma classe que está assim:
bbackground: ttransparent;
não está errado… é assim msm.. não me lembro o motivo pelo qual usei isso, mas é assim mesmo…
Sayans disse:
Não funcionou no IE7.
Max Medeiros disse:
@Ademir: De que Tag tá falando Ademir. Alguém conseguiu uma solução para que funcione no IE8 com backgorund?
desio disse:
deu certo no ie 8 e no chrome (naum testei em outros).
mas num tem um cód mais exnuto naum mano???
abrasss
Marcos disse:
Obrigado!!! Tava igual a um maluco procurando por isso.
Carol disse:
Valeuzasso… muito bom mesmo!
Ariel disse:
Cara, bacana seu fonte, apenas não funciona com inputs e textarea no IE.
Tem como averiguar isso?
Abç
Andrezão disse:
Testei aqui e funcional em todos, porem achei um bug, nós IEs não aceita outro tipo de borda a não ser “solid”. E o background no IE8 pisca e sai.
Lia disse:
Que tag??? @Ademir:
WilliamF disse:
Olá, Boa Dia a todos do blog, como percebem sou novo aqui, li este post, realmente gostei, baixei o js intalei, realmente funciona no IE8, só encontrei um porem, ele n pode ser clicado! somente consegui clicar no campo para digitar algo usando:
e só qunado eu clico fora da area do campo perto do label eu consigo digitar algo, sem ser assim o plugin n funciona!
Alguem teria um solução para este problema?
Desculpem qualquer coisa, fico no aguardo.
Att.WilliamF CLGames.
PortoAlegre, 23 de Fevereiro de 2011.
Flávia disse:
@Rafael:
Rafael, muito bom este código….estava quebrando a cabeça aqui..
valeu.
Fabricio Nascimento disse:
Galera, ótimo post, muito rápido e fácil.
Parabéns pelo post!
Luiz disse:
IE6 já era, estamos com a versão 10 – então quem ainda não trocou trate de se atualizar.
Paula disse:
Funciono em todos IE… mais no IE8 não funciono em todas as div, so em 1.
wiii disse:
@Ademir: qual tag manu nao concigo usar COM banckground
no IE8, no IE7 aparece e nos demas navegadores nemos no IE8
João Vítor Carvalho disse:
Valeu demais! Funcionou perfeitamente, substituí o jQuery rounded corners por este script. Valeu
Matheus Ramos disse:
eu ja uso esse script funciona belizinha em QUASE tudo, no maldito IE os selects não ficam com cantos arrendondados :s
se puderem me ajudar!! eu agradeço…..
mathias disse:
Este é artigo do qual todos esperam. Usar cantos arrendondados é muito mais estilloso, e esse maldito ie8 não facilita nossa vida com um simple código. Infelizmnte fico nas estatisticas dos que não conseguiram no ie8. Vou espela solução da equipe.
chucky515 disse:
massa funfo no ie7 e no ie8 porem no ie9 isso n funfa, e o bordes-radius funfa no ie8 e ie9 e não funfa no ie7 … por isso eu amo oh internet explorer \o/
michael disse:
Valeu man! Eu estava tendo uma dor de cabeça imensa com o ie.. valeu mesmo
Matheus disse:
Muito bom. Me ajudou bastante. Obrigado!!!
jonatam disse:
podemos usar a css border-radius:10px; mais porem nao funfa no IE =/
wesley disse:
@jonatam: cara usa isso aqui, muito melhor http://css3pie.com/demos/
João Victor disse:
Pessoal muito obrigado….
Terminando um projeto aqui e as bordas não funcionavam no IE8…
Este JS salvou minha vida e meu projeto ?
miguel disse:
Pessoal eu resolvi o problema do background-image dessa maneira:
background-image: url(imagem.png)!important;
linkkei.com disse:
Ou rafael o comando “bbackground: ttransparent;” não pode ser usando, pois ele não existe no css, o certo mesmo é “background: transparent;”