Bordas – Parte 2: border-color

border-color (Borda colorida)


Dê a sua borda múltiplas cores, usando essa novidade podemos obter efeitos interessantes. Quando usamos uma borda no CSS3, se você tem um limite padrão de pixels X, então você pode usar até cores X sobre essa borda, cada cor registrando 1 pixel de largura. Se você está usando um limite padrão de 10 pixels, mas se aplicar somente 5 ou 6 cores, a última cor será então aplicado para a largura da borda restante padrão.

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-.

Resultado do exemplo:

Este é um exemplo de uma borda colorida.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Para entendermos essa propriedade o que nos interessa são as 5 primeiras linhas, as demais são complementos, como largura, altura e etc.

  1. na primeira definimos a largura de nossa borda e seu estilo.
  2. definimos a cor da borda superior.
  3. definimos a cor da borda direita.
  4. definimos a cor da borda inferior.
  5. definimos a cor da borda esquerda.

Efeito degradê

Bordas degradê dão um olhar agradável se usadas corretamente. Este código é um pouco mais complexo, exigindo-lhe definir cada cor do degradê. E como vimos na explicação acima, cada cor representando 1 px da nossa borda. O código CSS é a seguinte:

Resultado do exemplo:

Este é um exemplo de uma caixa com bordas em degradê.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Borda colorida com cantos arredondados!

Agora vamos usar a criatividade e misturar 2 efeitos que aprendemos. Usaremos border-color em conjunto com border-radius em uma caixa de 10 pixels de borda.

Resultado do exemplo:

Este é um exemplo de uma caixa com bordas em degradê.

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
    Muito maneiro o degradê, mas teve uma coisa que eu não entendi. Quando você mostrou como declarar a border color, usou primeiro a declaração box-shadow. E depois não usou mais ela ao mostrar as cores em degradê. E você poderia colocar o exemplo de como ficaria a primeira declaração que você fez? xD Grata. ^^
  2. 18th maio 2010 | admin says: Responder
    Jequinh4 corrigi, estava com alguns erros de compreensão... espero ter ajudado!
  3. 18th maio 2010 | Jequinh4 says: Responder
    Eeeeee, entendi tudinho agora!!! Muito bom isso xD Obrigada!

Join the Conversation