Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Bordas – Parte 1: border-radius - Kolaborativa

Bordas – Parte 1: border-radius

border-radius (Bordas Arredondadas)


Atingir bordas arredondadas usando códigos CSS atual pode ser complicado – existem vários métodos disponíveis, mas nenhum deles está muito a frente. Criar imagens individuais para cada borda muitas vezes é necessário, mas deixa seu site muito pesado. Usando CSS3, criar uma borda arredondada é incrivelmente fácil. Ela pode ser aplicada a cada esquina ou cantos individuais, e a largura/cor são facilmente alteradas.

Declaração da propriedade:

OBS: Lembrando-se que para usar a propriedade no Mozilla Firefox utiliamos -moz-, e para o Safari e Google Chrome o -webkit-.

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Pode-se definir valores variados dependendo do resultado desejado, é possível se arredondar as bordas até se formar um círculo, deixando a altura e largura com tamanhos iguais:

Exemplo:

Assim como as propriedades margin, padding e border, é possível definir valores diferentes para cada canto do border-radius:

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Arredondando os cantos separadamente:

Também é possível arredondar os cantos separadamente, usando as seguintes declarações:

-moz-border-radius-topleft: para o canto superior esquerdo

-moz-border-radius-topright: para o canto superior direito

-moz-border-radius-bottomright: para o canto inferior direito

-moz-border-radius-bottomleft: para o canto inferior esquerdo

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Exemplo:

Este é um exemplo de uma caixa com bordas arredondadas.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Exemplos de Aplicações

As bordas arredondadas não ficam restritas ao elemento elas podem ser usadas em botões, campos de formulário, parágrafos, caixas de destaque em uma página de textos, entre outros. A imagem a seguir mostra um exemplo de aplicação em um formulário de contato:

Nome (obrigatório)

Site

Enviar


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores


FONTES DIVERSAS, PORÉM MUITAS INFORMAÇÕES FORAM TIRADAS DE SITES COMO HTTP://WWW.IRBABE.COM


Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 3 comments. Add yours

  1. 18th maio 2010 | Jequinh4 says: Responder
    Totalmente demais!!! xD Gostei muito! Só com o codigozinho faz tudo. Não precisa mais de imagens, etc e tal. Supimpa! ^_^
  2. 6th abril 2011 | augusto fiuza says: Responder
    Cara, que coisa espetacular esse radius. Muito bom mesmo. E muito obrigado por passar essa pra nós (pelo menos eu)que sofria muito com bordas arredondadas. Valeu mesmo.
  3. 6th abril 2011 | Dodilei says: Responder
    Boa espetacular Augusto!eu tb comemorei essa propriedade, e estou apertado de tempo, mas vou postar outras novas que também são demais!

Join the Conversation