Caixas com Bordas Arredondadas Utilizando CSS3

 Hoje vou mostrar como colocar bordas arredondadas em caixas utilizando CSS3. Vamos utilizar a propriedade "Border-radius" que faz tudo automaticamente não precisando de utilizar imagens.
O único problema é que esta propriedade não está disponível em todos os navegadores.
Funciona perfeitamente no Firefox, Flock, Safari, Chrome e Opera.

Veja os Browsers que suportam esta propriedade:
● Firefox 3.0 ou superior
● Flock 2.5 ou superior
● Chrome
● Opera
●Safari
Não funcionam nos Browsers:
● Internet Explorer
● Opera versão inferior a 10.

As vezes se faz necessário inserir alguns atributos especiais para o navegador reconhecer a função.

border-radius (padrão)
-moz-border-radius (navegadores Flock e Firefox)
-webkit-border-radius (navegadores Chrome e Safari)

Exemplo:

Este texto você visualiza com as bordas arredondadas, se você não estiver usando o Internet Explorer.
<div style="background:#6959CD;color:#fff; border: #000 5px solid;padding: 10px;
border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;">
 
Até o Próximo Tutorial! 
Caixas com Bordas Arredondadas Utilizando CSS3 Caixas com Bordas Arredondadas Utilizando CSS3 Reviewed by José Rafael on 11:46 Rating: 5

Um comentário