Loading
carregando...

DIV com cantos arredondados com CSS3


Criando cantos arredondados com CSS3

Informação: Essa função CSS3 funciona perfeitamente nos navegadores Internet Explorer 9, Google Chrome, Mozila Firefox e Safari.
Cada um desses navegadores precisará de um prefixo para que funcione, lembrando que esse prefixo será temporário até que o W3C valide os comandos CSS3.

Lista com prefixo de cada navegador
Mozilla Firefox: -moz-
Google Chrome e Safari: -webkit-
Opera: -o-
Internet Explorer: -ms-

Vamos ao exemplo de BORDER RADIUS

Obs: Irei mensionar apenas os pefixos dos navegadores mais usados, é importante colocar o comando também sem os prefixos como no exemplo, pois assim que os mesmos forem validados seu código ainda funcionará.


  1.  
  2. .teste {
  3. background:#333;
  4. width:450px;
  5. margin: auto;
  6. padding:10px;
  7. text-align:center;
  8.  
  9. -moz-border-radius:7px;
  10. -webkit-border-radius:7px;
  11.  border-radius:7px;
  12. }
  13.  


Coloque as informações de border-radius na no ID ou class da div que desejar que fique com as bordas arredondadas:

ATENÇÃO: essa funcionalidade não funciona no navegador IE (Internet Explorer) inferior a versão 9.

Fonte: http://www.webcis.com.br/cantos-arredondados-com-css3.html


Autor: Dárcio Gomes
Data: 14/12/2012 00:00:00