Cantos arrendodados no Firefox e no CSS3

Diego Henrique — Wed, 17 Dec 2008 22:48:42 +0000

Hoje a tarde precisei fazer uma div flutuante com cantos arredondados para um projeto e vasculhando na net encontrei uma solução muito legal, porem não aplicavel hoje. Trata-se da propriedade “moz-border-radius”, que infelizmente é implementada apenas no Firefox. Vou mostrar um exemplo só para vocês terem ideia do quanto essa propriedade torna uma tarefa, que hoje é chata, muito mais facil.

/**

 * Propriedade: -moz-border-radius

 * Variacoes possiveis: topleft topright bottomright bottomleft;

 */

#teste1 {

        -moz-border-radius:10px;

        background:lightgreen;

        border:1px solid green;

}

#teste2 {

        -moz-border-radius-topleft:15px;

        -moz-border-radius-bottomright:15px;

        border:1px solid #00f;

        background:lightblue;

}

#teste3 {

        -moz-border-radius-topright:50px;

        -moz-border-radius-bottomleft:50px;

        border:1px solid #f00;

        background:pink;

}

#teste4 {

        -moz-border-radius-topleft:50px;

        -moz-border-radius-bottomleft:50px;

        border:1px solid #fc0;

        background:#fffea1;

}

Com apenas 4 linhas eu fiz 4 variações de cantos arredondados que hoje da um trabalhão pra fazer de outra maneira. Veja o exemplo (só funciona no firefox): http://www.diegoholiveira.com/blog/wp-content/uploads/2008/12/cantos_arredondados_firefox.html

Como eu achei o tema muito interessante decidi procurar na W3C documentação sobre, e acabei vendo que na especificação da CSS 3 tem essa mesma propriedade, mas lá chamada de “border-radius”, quem quiser ver mais: http://www.w3.org/TR/css3-background/#the-border-radius

Agora vem aquela pergunta que não quer calar: Quando os navegadores começaram a implementar as especificações da CSS 3?
Espero que essa nova guerra dos navegadores (Chrome, Firefox, Opera, Safari e IE) acelere um pouco as coisas.

Referência: https://developer.mozilla.org/en/CSS/-moz-border-radius

Diego Henrique » Css

Cantos arrendodados no Firefox e no CSS3