29 de mai de 2013

Estilos de bordas em CSS

Oi Oi Gente :3
Eu disse que o único dia que não iria postar era a quinta, mas acabei lembrando que tinha prova hoje e tive que estudar ontem e deixando de cumprir minha palavra em relação a vocês, mas prometo que irei recompensar a falta de post ontem!
Como perceberam parei de postar aquelas coisas de moda & make porque não estava tendo prazer em postar aquilo, então só irei postar Tutoriais e Utilitários... Caso as outras postadoras quiserem postar sobre moda fiquem a vontade!
Enfim, o tutorial de hoje é bem útil e prático, são vários modelos de borda que podem fazer que seu design fique bonito e agradável !

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 vão lá na minha ask.

Créditos: Cherry Bomb

4 comentários:

  1. Adorei o tutorial :3

    Modern HTML

    ResponderExcluir
  2. Já sabia isso, mas é sempre bom relembrar! Ás vezes não dá tempo mesmo de postar, nem se preocupe :3 E outra coisa, posta o que tiver vontade, eu não tenho a mínima paciência para fazer posts sobre moda :/ Até mais. janeiro-janeiro.blogspot.com

    ResponderExcluir


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?