segunda-feira, 16 de maio de 2011

Borda Arredondada ( IE9, Firefox 4, Chrome, Safari 5 e Opera )

Quem nunca sonhou em criar um layout com bordas arredondadas sem muita complicação? Eu pelo menos quase chorava para criar, IE era de um jeito, FF de outro e assim ia, porém agora IE9, Firefox 4, Chrome, Safari 5 e Opera suportam a propriedade do CSS3 chamada  border-radius.
Como ela funciona? Muito simples, segue alguns exemplos de como utilizar:
Exemplo 1
<div style="width:500px;height:70px;background-color:#8484ac; border-radius: 30px;">
</div>







Exemplo 2
<div style="width:500px;height:70px;background-color:#8484ac; border-radius: 50px 10px 40px 20px;">
</div>




Exemplo 3
<div style="width:500px;height:70px;background-color:#8484ac; border-radius: 40px 0px 40px 0px; border:3px solid #556951;">
</div>


3 comentários:

  1. nem no iE9, aqui ela aparece quadrada

    ResponderExcluir
  2. Para o IE8, não tem compatibilidade mesmo.
    Mas com o IE9, exceto as primeiras versões do IE9, border radius é compatível, mas o documento não pode estar em modo de compatibilidade com versões mais antigas do IE: Por exemplo, através da metatag:
    <meta http-equiv="X-UA-Compatible" content="IE=8">

    ResponderExcluir