Usando bordas css no html

18/10/2012
1 ano de Kawaii World , parabéns atrasado õ/
Avenida brasil está chegando ao fim , oi oi oi koasoaks, sem mas delongas essas bordas css são lindas, servem para usar como divisória, como detalhe... Mas hoje o tutorial é de como usar  no HTML, para colocar bordas no footer, gadgets entre outros.


Não sou especialista em html, sei o basico,  mas vou tentar fazer tudo explicadinho para todo mundo entender, e não ter dúvidas. Primeiro vamos aprender a colocar borda pelo html, para ser usada em gadgets, no título do post, footer etc. Vamos ao primeiro exemplo. Observe esse código abaixo, ele é o html do titulo das postagens do meu blog.

h3.post-title {
  margin-top: -15px;
  margin-bottom: -10px;
}


Para colocar uma borda nele é só acrescentar o código base >>  border-top: 1px solid#e8dce1;
 no código html aonde quer que a borda fique, ou seja antes da chave fechar. Veja como o código html ficará abaixo, a única diferença é que colocamos o código base antes da chave fechar , veja :

h3.post-title {
  margin-top: -15px;
  margin-bottom: -10px;
border-top: 1px solid#e8dce1;
}

Agora vamos entender o código:
1px é o tamanho/espessura da borda
solid é o tipo/estilo da borda
#e8dce1 é a cor da borda

top é a posição da borda

Você pode mudar o que quiser o tamanho, posição, tipo e a cor.
Veja alguns tipos de bodas que podem ser usadas:


Veja quais são as posições e seus significados:
top - borda em cima
bottom -  borda em baixo
right -  borda do lado direito
left - borda do lado esquerdo

Espero que tenham intendido, ajudado e que seja útil , beijos Ana <3

11 comentários

  1. Eu adoro esse tuto, fica bem fofo, e você explicou muito bem! Eu sempre me esquecia os nomes das bordas, e não sabia como procurar no google HUEHAUHE

    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
    Respostas
    1. Obrigada, tava preocupada era se as pessoas não entendecem, mais que bom que ficou explicadinho.

      Excluir
  2. Mt legal só que eu sou pessima em fazer isso!
    Inventando Moda

    ResponderExcluir
  3. Adorei, bem útil. Garanto que vai ajudar bastante gente!

    ResponderExcluir
  4. Achei a Groove fofinha! *u*
    Flor, a afiliação está aceita! ^^
    O lay daqui é divo!
    Eu não tenho blog de encomendas, na verdade eu tenho, mas ainda não o divulguei! está fechado, estou querendo abrir quando tiver tempo, mas acho que será em breve, pois nesse últimos dias várias pessoas tem me perguntado se faço encomendas!
    Quando linkar avisa?
    Malikisses Xx

    Meu Jardim secreto

    ResponderExcluir
  5. Nossa , perfeita , essa post , amei *-* Estou te convidando para dar uma passadinha no meu blog , ele acabou de completar 100 membros , e adoraria , que me ajudasse a completar outra meta se possível ~~ KKK ~~ Se não quiser agradeço pela atenças , Kiss ! *

    Teen's House ( Clica No Perfil )

    ResponderExcluir
  6. Yoo !
    Esse tipo de tutorial é realmente muito util !
    U.u, 60ª seguidora do meu blog, hein ! *u*
    Tanks ! ~eu retribui~
    Bjão !
    ~Leeh ..
    meniina-nerd

    ResponderExcluir
  7. Olá, adorei o seu blog. E já estou seguindo-a. Será que você pode me seguir de volta?
    http://expectativasreais.blogspot.com.br/

    Beijão e bom final de semana.

    Ótima postagem.

    ResponderExcluir
  8. Amei o post, e amei seu blog!!

    [ http://vestido-de-porcelana.blogspot.com.br/ ]

    ResponderExcluir
  9. Oi Ana vim agradecer de coração pelo lay,ta super lindo...
    Só queria te pedir um favor,Por favor Muda meu Cabeçalho?
    é porque as imagens de baixo não combinam com meu blog entendeu?Dexa so a menina ou colocas outros com casais bjs
    Obg
    formula-amor.blogspot.com

    ResponderExcluir

Retribuo todos os comentários, menos comentários como Seguindo, segue de volta ? ou parecidos, esses NUNCA serão respondidos!
Fora isso fique a vontade para comentar e volte sempre <3