botões ou fundos com round corners

[Duccini]

Antes de mais nada queria dizer que já fiz uma busca no fórum, e encontrei uma resposta para a minha pergunta. O problema é que essa resposta é de 2008, e na velocidade com que as coisas andam, queria saber se existe uma maneira melhor (e web standard) agora pra se fazer isso no Dreamweaver. Enfim,

Quero fazer bordas arredondadas no cabeçalho de um site (um cabeçalho de digamos, 800x150px) apenas nos cantos superiores. Esse background é super simples, uma div 800x150px com uma cor de background. A única complicação, que percebi que é mais complicada do que eu esperava, são esses 2 cantos superiores arredondados, estilo round corner do Illustrator.

Sugestões?

Thanks folks!

Editado Maio 18, 2010 por Duccini

[_Vinny_]

Interessante a questão. Eu gosto muito de bordas arredondadas e sempre uso uns códigos variados. Vamos a alguns deles:

1 - https://developer.mozilla.org/en/css/-moz-border-radius

Este é o moz-border-radius. No link você pode ver exemplos de como fazer o efeito no seu código. Infelizmente moz-border-radius não roda em Internet Explorer, ou seja, não rola usar se os usuários do sites não tem o mesmo layout. Este seria perfeito para você colocar somente na parte superior da DIV, mas como mencionado antes não funciona no IE.

2 - http://codigofonte.uol.com.br/codigo/css/e...tilizar-imagens

Cantos arredondados sem o uso de imagens. Eu usei este a um tempo e não gostei muito, porém fica a gosto de cada um.

3 - http://home.tiscali.nl/developerscorner/li...quidcorners.htm

Este é o que mais uso e recomendo. Toda a explicação esta em inglês, se precisar de alguma sobre este, favor pode postar. Usa uma imagem para fazer o efeito de canto redondo.

[Duccini]

Ow cara, valeu!

O que eu mais curti foi sem dúvida o moz-border-radius pela flexibilidade e simplicidade. -moz-border-radius-topleft: 1em 1em; -moz-border-radius-topright: 1em 1em; , era exatamente isso o que eu queria :) Vamos torcer pra que o IE (sempre ele...) comece a aceitá-lo logo.

Esse segundo exemplo é o que eu tava usando.

E o terceiro, eu não curti muito exatamente porque ele usa imagem. Nesse sentido eu já prefiro montar o box no Illustrator, salvar como png, e usar como image background.

Bom, valeu mesmo!!!

Editado Maio 19, 2010 por Duccini

[_Vinny_]

O moz-border-radius é muito bom mesmo, pena que não funciona no IE. Mas por outro lado é customizavel quando usado.

Dá pra usar em um div, um input, textarea, etc... E não esqueça de além de usar o moz-border-radius também usar o -webkit-border-radius para funcionar em Chrome e Safari.

[Duccini]

Beleza, vou usar sim! Vlws!!!

[*FIT*]

Só ressaltando que o border-radius já funciona em ambos, tanto safari como chrome.