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.
Exemplo:
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
Reviewed by José Rafael
on
11:46
Rating:
Era isso que eu tava querendo valeuu
ResponderExcluir