CSS3 - Border-radius / Cantos arredondados

05dez 2009, às 08:08

Publicado em HTML / CSS | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Com a CSS3 a W3C oferece algumas novas opções, das quais uma boa é a propriedade border-radius. O Mozilla Firefox e Safari 3+ já implementaram está função, que permite criar cantos arredondados: Veja um exemplo:

O código para este exemplo acima é bem simples:

Os cantos podem ser tratados de maneiras individuais e com formas diferente para os mozilla tem sua própria maneira de tratar está propriedade diferente do que é a especificação. No mozilla Firefox é tratado com -moz-border-radius-topright , já para os navegadores que utilizam o webkit como renderizador -webkit-border-top-right-radius:

Propriedades para cada canto no mozilla e webkit:

• -moz-border-radius-topleft / -webkit-border-top-left-radius
• -moz-border-radius-topright / -webkit-border-top-right-radius
• -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
• -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Posts relacionados:

• Transparência com CSS em todos os navegadores
• Gradiente estilo Photoshop com CSS puro
• CSS3 no Internet Explorer com CSS 3 PIE
• Lista de ferramentas muito úteis para desenvolvedores CSS3
• Validando Formulários com jQuery
• Melhores extensões para gerenciar abas no Firefox
• Como preparar seu site para o Apple iPad