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;
Código: Border: 1px solid #000000;
Borda Dotted
Código: Border: 2px dotted #000000;
Código: Border: 2px dotted #000000;
Borda Dashed
Código: Border: 1px dashed #000000;
Código: Border: 1px dashed #000000;
Borda Groove
Código: Border: 3px groove #aa3cff;
Código: Border: 3px groove #aa3cff;
Borda Inset
Código: Border: 3px inset #aa3cff;
Código: Border: 3px inset #aa3cff;
Borda Outset
Código: Border: 3px outset #aa3cff;
Código: Border: 3px outset #aa3cff;
Borda Double
Código: Border: 3px double #000000;
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!
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
ResponderExcluirOla! Liah, eu fiz uma postagem no meu blog falando do seu, entra lá e confere? deixa um comentários falando o que achou!
ResponderExcluirhttp://s2alanacard.blogspot.com/2011/09/eu-curto-o-cherry-bomb-aviso-muito.html
Amei o tuto!!!
ResponderExcluirEsses estilos de bordas são ótimo.. gosto muito do dashed hahaha
ResponderExcluirnão entendi
ResponderExcluirnão entendi liah poderia explicar mais claramente ?
ResponderExcluirlinda eu não entendi.
ResponderExcluirQueria saber como eu coloco as bordas, só pode ser no moedelo viagem ?
e o codigo aonde ponho me explica mais claramente ?
oficialselenamariegomez.blogspot.com
Ameeeeeeeeeeei de paixão o tutorial sempre venho aqui para tutorias espero que melhore mt a vizualização do seu blog beijo liah
ResponderExcluirUrl do meu blog : http://menina-eletronica.blogspot.com.br/ , obg >..< '
Ai eu queria saber como fazer as bordas meio fio de luz!
ResponderExcluirOii, 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 ?
ResponderExcluirAmei seu blog ^^
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 !
ResponderExcluirSeu blog é d+
ResponderExcluirhttp://fimk.blogspot.com.br/
Amei o tuto =D
ResponderExcluirAmei seu post, obrigada pelas dicas :)
ResponderExcluirNão consegui
ResponderExcluirmiss-teensami.blogspot.com
Não consegui colocar... é no htlml ou css?
ResponderExcluir