domingo, 31 de janeiro de 2010

Bordas arredondadas com CSS 3

Nível: avançado
Código fonte

Desde de que passei a usar bordas arrendondadas (corner rounded) por aqui, há vários leitores pedindo que eu conte, em português, como se usa esse recurso. Neste blog não uso aquelas gambiarras complicadas para que os cantos das bordas apareçam curvos em todos os browsers. Eu utilizo border-radius, que é uma novidade da CSS3 e funciona nos seguintes navegadores:

  • Firefox 3.0 ou superior
  • Flock 2.5 ou superior
  • Chrome 3.0 ou superior
  • Opera 10.5 ou superior
  • Safari 3 ou superior

Não funciona nos browsers:

  • Internet Explorer 8 ou inferior
  • Opera 10 ou inferior

Se estiver usando um desses dois navegadores incompatíveis, você continuará vendo as bordas quadradas.

O pré-requisito para entender este tutorial é saber usar bordas. Caso ainda não tenha esse conhecimento, visite o post Aprendendo a usar bordas.

1º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.

► Folha de estilos comum:

<style>
#redondo {padding:20px; border:5px #ffa500 solid; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;}
</style>
<div id='redondo'>O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

► Folha de estilos do Blogger:

Os estilos do Blogger sempre devem ser definidos acima da linha de código ]]</b:skin>, a não ser que você use uma folha de estilos externa.

#redondo {padding:20px; border:5px #ffa500 solid; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;}
]]></b:skin>
<div id='redondo'>O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

► Inline

<div style="border: orange 5px solid; padding: 20px; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius: 50px">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

Para os demais exemplos vou colocar apenas a versão do código inline.

2º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.
<div style="background:#cd853f; color:#fff; border: #fff 5px solid; padding: 10px; border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

3º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.
<div style="background:#cd853f; color:#fff; border: #cd853f 5px solid; padding: 10px; border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

4º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você estiver não no Internet Explorer ou no Opera.
<div style="background:#9acd32; color:#000; border: #fff 10px solid; padding: 10px; border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

5º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.
<div style="background:#9acd32; color:#000; border: #fff 10px solid; padding: 10px; border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; border-top-right-radius: 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

6º exemplo:

O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.
<div style="background:#9acd32; color:#000; border: #fff 10px solid; border-top-color:#adff2f; border-left-color:#adff2f; padding: 10px; border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; border-radius-bottomright: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;">O texto que está nesta caixa deve aparecer com uma borda redonda se você não estiver no Internet Explorer ou no Opera.</div>

Todas as propriedades:

Cantos ↓ Padrão ↓ Flock e Firefox (Gecko) ↓ Chrome e Safari (Webkit) ↓
Todos: border-radius -moz-border-radius -webkit-border-radius
Superior esquerdo: border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
Superior direito: border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
Inferior esquerdo: border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
Inferior direito: border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius

Outros posts sobre CSS3:

Até mais!

Pix meutedio arroba mail ponto com

15 comentários:

  1. Teu post ficou sim bem explicativo, mas não sei se notou nem sempre isso é uma boa, ja que um dos mais conhecidos navegadores não aceita o CSS3 como válido ou não interpreta-o [refiro-me ao IE] então assim, teriamos que criar uma 2ª opção para o código caso o internauta usasse o IE o que daria muito trampo, mas nos navegadores como Firefox e Google funciona lindo que é uma beleza. Criei um artigo com um breve tutorial em CSS3 e notei o problema.

    ResponderExcluir
  2. 1º → Sim, não funciona no Internet Explorer e o post foi bem claro quanto a isso desde o começo.

    2º → Eu não acho isso ruim. É um recurso estético a mais, um bônus para quem usa um navegador melhor. Quem usa IE continuará vendo o site normalmente, só que quadrado. Um site muito famoso que usa esse recurso sem nenhum prejuízo para o usuário de IE é o Twitter.

    3º → Este blog boicota o Internet Explorer e não se envergonha disso.

    Volte sempre!

    ResponderExcluir
  3. Gostei muito do resultado do 5º exemplo.
    Vou implementa-lo eu meu novo layout.

    Muito obrigado.

    ResponderExcluir
  4. Esse foi o primeiro que achei que funcionou no Opera...

    Graças a função: border-radius

    Vlws ae, me ajudo muito...

    ResponderExcluir
  5. Anônimo,

    Que bom!

    Na verdade, quando eu fiz este post ainda não funcionava no Opera, mas na versão 10 já fica tudo redondinho.

    Volte sempre!

    ResponderExcluir
  6. Olá,
    Tem algum problema se usar os dois código:
    -moz-border-radius-topright
    -webkit-border-top-right-radius
    Ótimo artigo.

    ResponderExcluir
  7. Muito bom.. tou usando só em postagens que tem dialogos... vlw

    ResponderExcluir
  8. Eu não consegui colocar bordas redondas. =(

    ResponderExcluir
  9. Kiabbo, se mesmo com tantos exemplos você não conseguiu executar nenhum deles, só me resta anotar seu nome no meu caderninho: vou rezar por você. #IrmaSelmaFeelings

    ResponderExcluir
  10. Coloquei na minha página (que nao é um blog, acho que vale a pena comentar) e a "div" ocupou a tela toda, não somente o pedaçõ que eu gostaria, tem como mecher nisso? Sou extramamente novato e perdido, mas estou tentando, obrigado!

    ResponderExcluir
  11. Boa noite!
    Como faço para dimensionar o tamanho do box? é width e height como no css2?
    Obrigado ate mais.

    ResponderExcluir
    Respostas
    1. Eder, sim. Você usa width e height para mudar largura e altura em todas as versões de CSS. Não há perspectiva de que isso mude um dia.

      Excluir
  12. Esse site da erro no Internet Explorer... o bichinho fica louco e fecha '-'

    ResponderExcluir
    Respostas
    1. Eita! Não tenho Internet Explorer em casa nem no trabalho, mas depois vou tentar resolver isso. Obrigada por avisar.

      Excluir

Todos os comentários são moderados pela autora do blog.