Boteco Digital

CSS3 – Bordas Arrendondadas

Por muito tempo para utilizarmos bordas arredondadas tinhamos que utilizar imagens, o que nunca foi uma boa saida. Com CSS 3 chegou uma solução bem mais robusta, o border-radius que funciona em praticamente todos os browsers, utilizando diferentes declarações. O IE não possui nenhum suporte a bordas arrendondadas, mas a Microsoft já declarou que o IE9 terá suporte.

Como ainda não existe compatibilidade é recomendada a utilização da prorpiedade somente para fins estéticos onde não irá afetar a usabilidade do site, então atenção ao utilizá-la.

A declaração oficial para bordas arrendondadas é radius-border, mas existem declarações derivadas que veremos mais adiante.

border-radius:10px;

Como as propriedades margin e padding podemos definir valores diferentes para cada canto:

border-radius: 10px 20px;
border-radius: 10px 20px 30px 40px;

Ou também definir cada canto separadamente:

border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-bottomright:10px;
border-radius-bottomleft:10px;

Também temos as declarações derivadas asseguir;

-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */

Com o tempo os browsers irão utilizar a declaração oficial do W3C e não será mais necessário a utilização das declarações derivadas.

Bom era isso até mais e obrigado pelos peixes!

Categorias CSS
comments powered by Disqus