Bordas

Todo elemento HTML possui uma borda, muitas vezes invisível por padrão. Você pode controlar a aparência da borda através do CSS. Veja o exemplo:

p {
  border-style: solid;
}

O exemplo acima muda o estilo da borda dos elementos "p" para torná-la sólida. Existem várias opções de estilo de borda conforme lista abaixo:

Para controlar a espessura da borda deve-se utilizar a propriedade "border-width". Para controlar a cor, deve-se utilizar a propriedade "border-color". Caso deseje arredondar a borda nos cantos, utilize a propriedade "border-radius", definida em pixels. Veja o exemplo completo:

p {
  border-style: solid;
  border-width: 6px;
  border-color: aqua;
  border-radius: 4px;
}

É possível especificar os principais parâmetros da borda (espessura, estilo e cor), de forma enxuta através da propriedade "border". Nesse caso, a ordem dos parâmetros é importante:

p {
  border: 5px solid red;
}

Além disso, é possível especificar estilos diferentes para lados diferentes da borda. Para isso, utilize os sufixos ("-top", "-right", "-left" e "-bottom") nas propriedades que deseja alterar:

p {
  border-top: 5px solid red;
}

No exemplo acima, apenas a borda superior do elemento parágrafo sofre alteração.

Além dessa forma, é possível especificar mais de um valor (separados por espaço) em uma propriedade da borda. Nesse caso, cada valor estará relacionado a um dos lados da borda, seguindo a seguinte ordem: cima, direita, baixo e esquerda. Veja o exemplo:

p {
  border-style: solid dashed none double;
}

No exemplo acima, o estilo solid é aplicado na borda superior, o estilo dashed na borda à direita, o estilo none na borda inferior e o estilo double na borda à esquerda.