Bordas

A Figura 4 mostra 7 exemplos de definição de bordas, usando as propriedades border, border-style, border-top, border-bottom, border-width, e border-color. Observe cada um dos exemplos e veja que os efeitos são bem distintos, mesmo variando apenas algumas das propriedades.

See the Pen autoria_web_f4 _bordas by Materiais (@materiais) on CodePen.

A propriedade border-style, a qual define o tipo de linha que circunda o elemento, pode ser especificada em termos de um até 4 valores, da seguinte maneira:

• 4 valores indicam, respectivamente: a borda de cima, da direita, de baixo e da esquerda. Por exemplo: border-style:dotted solid double dashed.
• 3 valores indicam, respectivamente: a borda de cima, as bordas da direita e esquerda (assumem o mesmo valor) e, por fim, a borda de baixo. Exemplo:border-style:dotted solid double.
• 2 valores indicam, respectivamente, as bordas de cima e de baixo (assumem o mesmo valor) e as bordas da direita e da esquerda (com mesmo valor). Exemplo: border-style:dotted solid.
• 1 valor indica que todas as quatro bordas assumirão o mesmo valor. Exemplo: border-style:dotted.

Outra maneira de fazer essa definição é usando as propriedades referentes ao estilo de cada lado, como no exemplo a seguir:

Então, como decidir quais propriedades usar? Fácil. Dê preferência por escrever o código de modo mais claro e sucinto que você puder. Isso serve para todas as outras propriedades CSS.