Tutorial Iniciante de CSS: Bordas

7 03 2008

Texto com borda estilo "dashed"

Pra criar uma borda ao redor de um elemento, tudo que você precisa é dessa propriedae: border-style. Os valores podem ser solid, dotted, dashed, double, groove, ridge, inset e outset.

Veja o efeito de cada valor:

Diversos tipos de borda

border-width define a espessura da borda, e geralmente aparece em pixels. Existem também as propriedades border-top-width, border-right-width, border-bottom-width e border-left-width. Finalmente, border-color define a cor.

Adicione esse código ao seu arquivo CSS:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

Isso vai criar uma borda tracejada ao redor de todos os cabeçalhos secundários (os elementos h2) do HTML, que tem espessura superior e inferior de 3 pixels e espessura da borda direita e esquerda de 10 pixels. Essas duas sobrescreveram o valor de 3 pixels de espessura definidos para a borda inteira – quando dois valores podem ser aplicados ao mesmo elemento, o que vale é o último que foi declarado.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , , ,

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

One response

21 05 2009
Jackson Rubem

Parabéns por seus tutoriais. Excelentes!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: