quarta-feira, 18 de abril de 2012

CSS3 Border Radius

Se você quer criar elementos com bordas arredondadas, é possível utilizar o border radius para isso.

Parâmetros:

  border-radius: top-left, top-right, bottom-left, bottom-right;

  > top-left: borda no topo do lado esquerdo
  > top-right: borda no topo do lado direito
  > bottom-left: borda em baixo no lado esquerdo
  > bottom-right: borda em baixo no lado direito


* A aplicação das bordas acontece sempre na diagonal:

   Aplica em todas as bordas:

     > border-radius: 10px;

   Aplica nas bordas  top-left e bottom-right o primeiro parâmetro;  top-right e bottom-left o segundo parâmetro:
   > border-radius: 10px 10px;

   Aplica nas bordas top-left o primeiro parâmetro;  top-right e bottom-left o segundo parâmetro; e bottom-right o terceiro parâmetro
   > border-radius: 20px 4px 10px;

Exemplos: 

http://dabblet.com/gist/2417731




Nenhum comentário:

Postar um comentário