Divs arredondadas

Divs são literalmente quadradas, pelo menos até o CSS 2 (não sei quanto ao 3). Os browsers baseados na engine Gecko até têm suporte a bordas arredondadas, mas só eles.

Até hoje só conhecia dois métodos para conseguir cantos arredondados nas divs:

  1. Usar uma imagem como plano de fundo da div: Funciona bem se e somente se o layout for fixo.
  2. Usar quatro imagens, uma para cada canto e assim atribuir cada uma a um elemento da div: uma para o fundo, uma para o titulo, etc. Esse método funciona tanto com layout fixo como elástico.

Esses métodos apresentam seus pontos fracos: se você quiser mudar uma coisa, por menor que seja, lá vai você editar a imagem novamente (convenhamos que apenas mudar uma linha de CSS é bem mais prático).

Felizmente acharam uma solução para isso, um script em Javascript que arredonda as bordas da div sem usar imagens:

CurvyCorners

Publicidade

2 Respostas para “Divs arredondadas

  1. Alexandre maio 5, 2007 às 5:12 pm

    É sensacionai :) Só é meio pesadinho.. 20k pra conseguir cantos arredondados?

  2. André Ramaciotti maio 5, 2007 às 5:22 pm

    Alexandre:
    Pesadinho entre aspas, se você fosse usar um dos outros métodos acabaria dando bem mais que 20kb

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: