16 de outubro de 2009

CSS Tutorial - bordas com cantos arredondados, sem o uso de imagens

Agora não é mais preciso ficar batendo cabeça para fazer aqueles boxes com cantos arredondados inserindo imagens nos cantos (um saco), agora o CSS3 veio pra facilitar a vida dos web designers com a propriedade border-radius. Só tem um pequeno problema, essa propriedade não é suportada pelo navegador Opera nem pelo IE, esse último não é novidade :( , mas é suportada pelo Firefox e o Safari.

Para o firefox renderizar o border-radius, usa-se o -moz-border-radius e para o Safari -webkit-border-radius. Recomendo usar os dois juntos, já que nunca se sabe em que browser irão acessar a página.

Importante! Não esqueça de colocar também a propriedade border para que a borda e consequentemente os cantos sejam exibidos.

#umadiv{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;

border:2px #ffffff solid;
}

Essas são as propriedades para cada canto dos boxes:

topo esquerdo:
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;

topo direito:
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;

iferior esquerdo:
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;

inferior direito:
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;


Respectivamente:

bordasarredondadas.gif

Para não haver muito trabalho redimensione todos os quatro cantos de uma vez, use:

-moz-border-radius: 8px;
-webkit-border-radius: 8px;

bordasarredondadas2.gif

12 comentários:

  1. Muito bom, pena que os navegadores azuizinhos não suportam isso também.

    ResponderExcluir
  2. JQuery é melhor, funfa no IE tbm.

    ResponderExcluir
  3. onde que eu encaixo esse código no meu HTML?

    Ex: Abaixo de <...

    Por favor responder para meu e-mail: hudsonphn@hotmail.com

    Abraço!

    ResponderExcluir
  4. @Hudson: Olá Hudson, você deve criar duas tags: <style> e </style> no seu HTML, todo codigo CSS como o border-radius deve ser colocado entre essas tags, fica difícil te explicar como funciona apenas nessa mensagem, mas se você não tem muita intimidade com o CSS eu te indico esse site em português onde você aprender CSS: pt-br.html.net/tutorials/css/, depois de ter um conhecimento você vai conseguir aplicar essa e outras propriedades ;D espero que tenha ajudado !

    ResponderExcluir
  5. pow cara, obrigado!

    Parabéns pelo blog!!!

    Fik com Deus!!!

    ResponderExcluir
  6. Muito bom! parabens pelo blog!

    ResponderExcluir
  7. JQuery é legal, mas pode ser aproveitado para coisas mais úteis. Se exite um padrão, siga-o!

    :)

    ResponderExcluir
  8. Fala aí, Danilo, tudo beleza? Valeu pelas dicas! Mas me diz aí, então essa função CSS somente funciona nos navegadores Mozilla e Safari?

    E o Google Chrome, e o Netscape, e outros browsers menos conhecidos ou de plataformas Linux por exemplo, como o Konqueror, Epiphany, Enigma?

    Não deveria existe uma função border-radius universal, que funcione com todos os browsers que tenham suporte a esse recurso CSS? Isso não devia seguir uma web-standard pra CSS?

    Valeu! =D

    ResponderExcluir
  9. Fala aí, Danilo, tudo beleza? Valeu pelas dicas! Mas me diz aí, então essa função CSS somente funciona nos navegadores Mozilla e Safari?

    E o Google Chrome, e o Netscape, e outros browsers menos conhecidos ou de plataformas Linux por exemplo, como o Konqueror, Epiphany, Enigma?

    Não deveria existe uma função border-radius universal, que funcione com todos os browsers que tenham suporte a esse recurso CSS? Isso não devia seguir uma web-standard pra CSS?

    Valeu! =D

    ResponderExcluir
  10. @ocaradainformatica: Fala Gabriel, andei dando uma visitada no teu blog . Que pergunta grande hein, vamos por partes.

    Infelizmente essas propriedades do CSS3 só funcionam nos navegadores Firefox, Safari, Chrome e se eu não me engano também no Opera, mas creio que daqui a algum tempo os outros browsers adquiram isso. Navegores da plataforma Linux complica ainda mais, esses que não suportam mesmo.

    Infelizmente não há uma propriedade universal para todos os navegadores por que o CSS3 esta ainda em desenvolvimento e é relativamente nova.

    Espero que tenha te esclarecido alguma coisa.

    ResponderExcluir
  11. Opa, Danilo, obrigado pela visita, seja muito bem-vindo sempre! Valeu pela resposta também, esclareceu bastante sim, eu ainda estou no CSS2.1, conheço muito pouco do CSS3 e sei que esse é um recurso novo.

    O que me impressiona é que pelo menos até onde eu sei o CSS3, embora ainda esteja em desenvolvimento, não é uma versão assim tão nova e o recurso para bordas arredondadas existe desde o seu lançamento.

    Sendo um recurso padrão do CSS3, o que me intriga é: por que os browsers precisam de comandos diferentes para acessar uma função padrão? Por que "moz-border-radius" e "webkit-border-radius" e não somente "border-radius"? Entende agora o que eu quero dizer?

    Infelizmente, esse tipo de coisa mostra que os "fabricantes" dos browsers ainda não se preocupam muito em seguir os padrões web, quando parece que começa a haver uam convergência para os padrões, um recurso novo é lançado e cada um, em vez de seguir a tendência de convergência, cria seu próprio método de lidar com o novo recurso e os padrões meio que se perdem no caminho... Esse é meu ponto de vista...

    ResponderExcluir