Bordas arredondadas em CSS 3

As características de CSS 3 incluem bordas arredondadas, através do atributo border-radius, que define a curvatura que deve ter a borda do elemento.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 01/9/08
Valorize este artigo:
CSS 3 incorpora novas propriedades para o controle de bordas dos elementos. Agora se permitem bordas com as esquinas arredondadas, bordas com imagens (inclusive pode-se utilizar várias imagens para definir o aspecto da borda, sombras, etc.

Neste artigo vamos explicar como realizar bordas arredondadas com CSS3.

Temos a propriedade border-radius, que permite definir bordas arredondadas nas esquinas, especificando as medidas do radio que devem dar à curva das esquinas

border-radius: 5px;

Definiria um radio de 5 pixels no arredondamento das esquinas do elemento. Até agora Mozilla adotou este atributo com um nome especial, que é válido para produtos como Firefox, enquanto que as especificações de CSS3 não tiverem alcançado o estado "Candidate Recommendation", que é quando se supõe que os diferentes navegadores devem implementá-las. O nome do atributo por enquanto é:

-moz-border-radius

Quanto à Internet Explorer há que dizer que ainda não suporta este atributo de CSS 3, porém esperemos que o pessoal de Microsoft possa implementar em breve no navegador, ou que as especificações de CSS3 passem rápido ao estado "Candidate Recommendation", que seria a chamada para que se implementem na generalidade dos navegadores.

Por enquanto, para navegadores Mozilla, o atributo border-radius se utilizaria, por exemplo, assim:

DIV {
border: 1px solid #000000;
-moz-border-radius: 7x;
padding: 10px;
}


Com isto conseguimos que todos os div tenham uma borda arredondada nas esquinas de radio de 7pixels.

Podemos ver o exemplo em uma página a parte. Porém, há que lembrar que só se verá o efeito utilizando Firefox ou navegadores baseados em Mozilla.

Contudo, o atributo border-radius tem outras possíveis configurações, na qual se podem definir os valores para o radio das quatro esquinas separadamente. Desta maneira:

-moz-border-radius: 7px 27px 100px 0px;

Assim estaríamos definindo uma borda arredondada com radio de 7 pixel para a esquina superior esquerda, logo 27px para a esquina superior direita, de 100px para a inferior direita e 0px para a inferior esquerda. (Há que explicar que um border-radius de 0px é uma borda com esquina em ângulo reto)

Podemos ver este ejemplo em uma página a parte.

As bordas arredondadas com CSS 3, como se poderá imaginar, só são vistas se tiver sido definida alguma borda visível ao elemento que as atribuímos, seja solid, dotted, etc. Isso é o que define as especificações de CSS3, embora no momento de escrever o artigo devo assinalar que inclusive Mozilla ou Firefox (o único que até agora suporta este atributo de CSS3) não funciona inteiramente corretamente com isto e só mostra as bordas arredondadas com solid.

Outra coisa que definem as especificações de CSS e que por enquanto não está funcionando inteiramente bem, é que as imagens de fundo devem se ajustar às bordas arredondadas. Ocorre, até este momento, que as imagens de fundo saem por fora das bordas arredondadas. Confiamos em que no futuro isto possa ser revisado e otimizado, para que tudo funcione corretamente. Devemos lembrar que no momento de escrever o artigo ainda se têm que terminar de definir as especificações de CSS 3 e depois, os navegadores web deveram se atualizar em um certo espaço de tempo para suportá-las completamente.

Nota: Oferecemos uma lista das características principais de CSS 3 no artigo Introdução a CSS3.





Manual: CSS 3

Comentários do artigo
Foram enviados 3 comentários ao artigo
3 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato