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:

Isto tem uma fronteira

Cada elemento pode ter uma borda definida. Fronteiras requerem três atributos:

• largura: A largura da borda. Esta pode ser medida em qualquer unidade de CSS, mas a largura da borda é normalmente descrita em pixels ou EMS. (Lembrar: A em é mais ou menos a largura da letra maiúscula # 147-M # 148- 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.

• estilo: CSS suporta um número de estilos de borda. O exemplo ilustra uma margem dupla. Este desenha uma borda com duas linhas finas ao redor do elemento.

É 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 destes estilos para qualquer fronteira:

• Sólido: A linha sólida ú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 a lacuna.

• Sulco: Utiliza 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.

• 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 tedioso. Felizmente, CSS inclui um atalho fronteira acessível que faça fronteiras muito mais fácil de definir.

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 aplica-se um estilo de borda para o fundo do título, bem como diferentes fronteiras acima, abaixo, e para os 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 diversas fronteiras definidas.
Parágrafos têm diversas fronteiras definidas.

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

Há também os atributos de fronteira específica 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.