Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 31 maio 2011

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.

36 comentários

Responder
  1. 8 de fevereiro de 2010

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

  2. 19 de fevereiro de 2010

    Aline Ioavasso disse:

    Não consegui fazer ele funcionar no ie6.

  3. 26 de fevereiro de 2010

    Diego disse:

    Gente n consegui fazer, alguem pode me ajduar a fazer detalhadamente ?

  4. 11 de março de 2010

    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!

  5. 28 de maio de 2010

    Cantos arredondados no Internet Explorer (sem imagens) « Diretório Técnico disse:

  6. 14 de junho de 2010

    Vinicius disse:

    Opa!!! show de bola esse código… parabens e muito
    obrigado pela força!!!

  7. 18 de junho de 2010

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

  8. 18 de junho de 2010

    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>

  9. 18 de junho de 2010

    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…

  10. 25 de junho de 2010

    Sayans disse:

    Não funcionou no IE7.

  11. 26 de agosto de 2010

    Max Medeiros disse:

    @Ademir: De que Tag tá falando Ademir. Alguém conseguiu uma solução para que funcione no IE8 com backgorund?

  12. 28 de agosto de 2010

    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

  13. 26 de setembro de 2010

    Marcos disse:

    Obrigado!!! Tava igual a um maluco procurando por isso.

  14. 28 de janeiro de 2011

    Carol disse:

    Valeuzasso… muito bom mesmo!

  15. 1 de fevereiro de 2011

    Ariel disse:

    Cara, bacana seu fonte, apenas não funciona com inputs e textarea no IE.
    Tem como averiguar isso?
    Abç

  16. 16 de fevereiro de 2011

    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.

  17. 21 de fevereiro de 2011

    Lia disse:

    Que tag??? @Ademir:

  18. 23 de fevereiro de 2011

    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.

  19. 10 de março de 2011

    Flávia disse:

    @Rafael:
    Rafael, muito bom este código….estava quebrando a cabeça aqui..
    valeu.

  20. 7 de abril de 2011

    Fabricio Nascimento disse:

    Galera, ótimo post, muito rápido e fácil.
    Parabéns pelo post!

  21. 21 de abril de 2011

    Luiz disse:

    IE6 já era, estamos com a versão 10 – então quem ainda não trocou trate de se atualizar.

  22. 25 de abril de 2011

    Paula disse:

    Funciono em todos IE… mais no IE8 não funciono em todas as div, so em 1. 🙁

  23. 30 de maio de 2011

    wiii disse:

    @Ademir: qual tag manu nao concigo usar COM banckground
    no IE8, no IE7 aparece e nos demas navegadores nemos no IE8

  24. 28 de junho de 2011

    João Vítor Carvalho disse:

    Valeu demais! Funcionou perfeitamente, substituí o jQuery rounded corners por este script. Valeu

  25. 8 de julho de 2011

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

  26. 30 de agosto de 2011

    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.

  27. 15 de setembro de 2011

    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/

  28. 3 de outubro de 2011

    michael disse:

    Valeu man! Eu estava tendo uma dor de cabeça imensa com o ie.. valeu mesmo

  29. 26 de outubro de 2011

    Matheus disse:

    Muito bom. Me ajudou bastante. Obrigado!!!

  30. 7 de dezembro de 2011

    jonatam disse:

    podemos usar a css border-radius:10px; mais porem nao funfa no IE =/

  31. 21 de dezembro de 2011

    wesley disse:

    @jonatam: cara usa isso aqui, muito melhor http://css3pie.com/demos/

  32. 5 de janeiro de 2012

    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 ?

  33. 13 de janeiro de 2012

    miguel disse:

    Pessoal eu resolvi o problema do background-image dessa maneira:
    background-image: url(imagem.png)!important;

  34. 23 de janeiro de 2012

    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;”

  35. 25 de abril de 2012

    marcelo disse:

    Cara muito bom! mas estou com uma dúvida, estou utilizando CSS externa, como referêncio para que o .JS aplique o efeito? Pois no seu exemplo a CSS esta inline.

    Valeu!

  36. 25 de abril de 2012

    marcelo disse:

    AH! Beleza, consegui resolver com a CSS externa!

    Segue:

    meu site

    DD_roundies.addRule(‘#conteudo #topo_conteudo ul#menu_opcoes li a’, ‘5px 5px 0 0’, true);

    #conteudo #topo_conteudo ul#menu_opcoes li a { border: 0; }

    Valeu!

Escreva seu comentário