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:
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
- Próxima Página: Juntando Tudo
- Página Anterior: Margens e Espaçamento
- Propriedades “Atalho” – Como usar a propriedade border pra definir cor, estilo e espessura da borda de uma vez só (Tutorial Intermediário de CSS)
Exemplos
Referência
Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
Parabéns por seus tutoriais. Excelentes!