Estilos de bordas em CSS

|
Eu já postei tutoriais sobre menus, backgrounds, gadgets e etc em que a borda de tais elementos podia ser alterada. A maioria das pessoas altera somente a cor da borda, pois poucas sabem que existem vários estilos de bordas que podem ser aplicados de maneira fácil e que dão efeitos muito legais, basta usar a criatividade e brincar com os efeitos.

Pensando nisso, hoje vou mostrar para vocês os códigos de bordas que podem ser usados no seu layout. Para entender melhor os códigos, vou explicar como funciona:
Border: 1px solid #000000; -> Propriedade: espessura em pixels estilo cor;
Lembrando que você não altera a palavra "border" ok?
Borda Solid
Código: Border: 1px solid #000000;

Borda Dotted
Código: Border: 2px dotted #000000;

Borda Dashed
Código: Border: 1px dashed #000000;

Borda Groove
Código: Border: 3px groove #aa3cff;

Borda Inset
Código: Border: 3px inset #aa3cff;

Borda Outset
Código: Border: 3px outset #aa3cff;

Borda Double
Código: Border: 3px double #000000;


Você também pode usar bordas diferentes e de cores diferentes em cada um dos lados do elemento, ou usar borda apenas em determinado lado do elemento. Veja os exemplos:

Border-top: 1px solid #000000; Border-left: 3px double #000000; border-bottom: 1px dashed #000000; border-right: 2px dotted #000000;

Border-left: 3px solid #aa3cff;

Agora que você já sabe os códigos, é só adicioná-los aos elementos do seu layout, como na sidebar, no menu, no blockquote, etc.
Espero que tenha sido útil para vocês, comentem dizendo o que acharam e se tiverem alguma dúvida.
E se você ainda não se inscreveu no Blog vs Blog 2, corre porque as inscrições só vão até dia 16!



16 comentários

  1. Eu adorei as bordas , flor participa do 1º sorteio do meu blog http://perfeitinha-blog.blogspot.com/2011/09/chegou-meu-premio-1-sorteio-do-blog.html

    ResponderExcluir
  2. Ola! Liah, eu fiz uma postagem no meu blog falando do seu, entra lá e confere? deixa um comentários falando o que achou!

    http://s2alanacard.blogspot.com/2011/09/eu-curto-o-cherry-bomb-aviso-muito.html

    ResponderExcluir
  3. Esses estilos de bordas são ótimo.. gosto muito do dashed hahaha

    ResponderExcluir
  4. não entendi liah poderia explicar mais claramente ?

    ResponderExcluir
  5. linda eu não entendi.
    Queria saber como eu coloco as bordas, só pode ser no moedelo viagem ?
    e o codigo aonde ponho me explica mais claramente ?
    oficialselenamariegomez.blogspot.com

    ResponderExcluir
  6. Ameeeeeeeeeeei de paixão o tutorial sempre venho aqui para tutorias espero que melhore mt a vizualização do seu blog beijo liah
    Url do meu blog : http://menina-eletronica.blogspot.com.br/ , obg >..< '

    ResponderExcluir
  7. Ai eu queria saber como fazer as bordas meio fio de luz!

    ResponderExcluir
  8. Oii, eu não consegui colocar a borda ... Na verdade, eu vi que no título tá "...em CSS", então eu coloquei no CSS, mas não deu certo ... é no css mesmo que coloca ?

    Amei seu blog ^^

    ResponderExcluir
  9. Obrigado pela aula, mais sinceramente, onde eu coloco um desses códigos ? é no gadget, html ou no personalizar, html ??????? na frente de algum código ? ou em cima ?? tem algum código pra mim procurar no html e colar um desses ai em cima ou em baixo ? obrigado !

    ResponderExcluir
  10. Seu blog é d+

    http://fimk.blogspot.com.br/

    ResponderExcluir
  11. Amei seu post, obrigada pelas dicas :)

    ResponderExcluir
  12. Não consegui
    miss-teensami.blogspot.com

    ResponderExcluir
  13. Não consegui colocar... é no htlml ou css?

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...