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!



Related Posts Plugin for WordPress, Blogger...