Blog Web Standards

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

08 2010 fevereiro

Cantos arredondados no Internet Explorer (sem imagens)

Autor: Carlitos em CSS

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.

Tags: , , , , , , ,

Artigos relacionados

  1. Conditional comments para Internet Explorer Uma boa maneira de fugirmos dos hacks é usar os...
  2. Hover, focus e active em qualquer elemento no Internet Explorer 6 Uma das diversas limitações apresentadas pelo IE6 está relacionada ao...
  3. Hack para Internet Explorer 6 Já que estamos entrando no mundo “obscuro” dos hacks, iremos...
  4. Como testar o site no IE6, IE7 e IE8? Quer saber alguma maneira de testar seu site no Internet...

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

    [...] Fonte: http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/ [...]

  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.

Escreva seu comentário