Você pode usar CSS3 para desenhar bordas em torno de qualquer elemento HTML5. Você tem alguma liberdade no tamanho da borda, estilo, e cor. Aqui estão duas maneiras de definir propriedades de fronteira: usando atributos de fronteira individuais, e usando um atalho. Fronteiras realmente não alterar o esquema, mas eles adicionar separação visual que pode ser atraente, especialmente quando seus layouts são mais complexas.

Como usar os atributos de fronteira

Aqui está uma página com uma borda simples desenhada em torno do título.

O código para a página borderProps.html demonstra os princípios básicos de fronteiras em CSS:

Este tem uma fronteira

Cada elemento pode ter uma fronteira definida. Fronteiras exigem três atributos:

• largura: A largura da borda. Isto pode ser medido em qualquer unidade CSS, mas a largura da borda é normalmente descrita em pixels ou ems. (Lembrar: A em é aproximadamente a largura da letra “M” na fonte atual.)

• cor: A cor usada para exibir a fronteira. A cor pode ser definida como qualquer outra cor em CSS, com nomes de cores ou valores hexadecimais.

  Video: Curso Básico HTML5 + CSS3 - Margem, Borda, Espaçamento e Box Model em CSS3 #16

• estilo: CSS suporta um número de estilos de borda. O exemplo ilustra uma borda dupla. Isto cria uma fronteira com duas linhas mais finas em torno do elemento.

  Video: Margens, Bordas e Box Model - HTML e CSS na Prática U2L2

É necessário definir todos os três atributos se você quiser fronteiras para aparecer corretamente. Você não pode contar com os valores padrão para trabalhar em todos os navegadores.

Como definir estilos de borda

CSS tem uma lista pré-determinada de estilos de borda que você pode escolher. Aqui está uma página com todos os estilos de borda primários exibidos.

Você pode escolher qualquer um desses estilos para qualquer fronteira:

• Sólido: Uma linha contínua única em torno do elemento.

• Duplo: Duas linhas em torno do elemento com um espaço entre eles. A largura da borda é a largura combinada de ambas as linhas e o intervalo.

• Sulco: Usa sombreamento para simular um sulco gravado na página.

• Cume: Usa sombreamento para simular um cume desenhado na página.

• 
  
  
  

  Inserir: Usa sombreamento para simular um botão pressionado-in.

  Video: Curso de CSS - Aula 7 (Posicionamento de Elementos, Bordas e Z-Index)

• Início: Usa sombreamento para simular um botão saindo a partir da página.

• Tracejadas: Uma linha tracejada em torno do elemento.

• Pontilhado: Uma linha pontilhada em torno do elemento.

Como usar o atalho fronteira

Definindo três atributos CSS diferentes para cada fronteira é um pouco entediante. Felizmente, CSS inclui um atalho fronteira acessível que faça fronteiras muito mais fácil de definir.

Video: CSS3 - Aula 08 - bordas (border) - Parte 1

Você não pode dizer a diferença a partir da saída, mas o código para borderShortcut.html é extremamente simples:

Esta página utiliza o atalho fronteira

A ordem em que você descreve atributos de fronteira não importa. Basta especificar uma cor, um tamanho e um estilo de borda.

Como criar fronteiras parciais

Se você quiser, você pode ter um controle mais preciso de cada lado de uma fronteira. Há uma série de atalhos de fronteira especializadas para cada uma das sub-fronteiras.

Esta página se aplica um estilo de borda para o fundo da rubrica, bem como diferentes fronteiras acima, abaixo e dos lados dos parágrafos. fronteiras parciais são bastante fáceis de construir, como você pode ver a partir da listagem de código:

Esta posição tem um limite inferior
Parágrafos têm várias fronteiras definidas.
Parágrafos têm várias fronteiras definidas.

Observe os estilos de borda: border-top, border-bottom, border-left, e border-right. Cada um destes estilos age como o atalho fronteira, mas ele só funciona em um dos lados da fronteira.

Há também atribui fronteira específico para cada lado (bottom-border-width ajusta a largura da borda inferior, por exemplo), mas eles estão quase nunca é usada porque a versão de atalho é muito mais fácil.