Propriedade border: As 'paredes' da sua caixa

Saiba como adicionar e estilizar bordas aos elementos (cor, espessura, estilo).

No Box Model, depois do conteúdo e do padding, encontramos a borda (border). A border é a linha visível que envolve o padding e o conteúdo de um elemento. Ela serve para delimitar visualmente o elemento e separá-lo do seu entorno.

Pense na border como as "paredes" ou a "embalagem" de uma caixa de presente. Ela dá forma e define os limites visíveis do seu elemento.

Como usar a propriedade border

A propriedade border é uma shorthand (atalho) muito comum, que permite definir a espessura, o estilo e a cor da borda em uma única declaração.

Sintaxe da Shorthand:

seletor {
  border: [border-width] [border-style] [border-color];
}

Exemplo:

div {
  border: 2px solid red; /* 2px de espessura, estilo sólido, cor vermelha */
}

Propriedades Individuais da Borda

A propriedade border é um atalho para as seguintes propriedades individuais:

  1. border-width (Espessura da Borda):

    • Define a espessura da linha da borda.
    • Valores: Comprimento (px, em, rem), ou palavras-chave (thin, medium, thick).
    • Exemplo: border-width: 2px; ou border-width: medium;

  2. border-style (Estilo da Borda):

    • Define o estilo da linha da borda.
    • Valores:
      • none (padrão): Sem borda.
      • solid: Linha contínua.
      • dashed: Linha tracejada.
      • dotted: Linha pontilhada.
      • double: Linha dupla.
      • groove: Borda com efeito 3D "entalhado".
      • ridge: Borda com efeito 3D "saliente".
      • inset: Borda com efeito 3D "afundado".
      • outset: Borda com efeito 3D "saliente".
    • Exemplo: border-style: solid;

  3. border-color (Cor da Borda):

    • Define a cor da linha da borda.
    • Valores: Nomes de cores, hexadecimal, RGB, HSL, etc.
    • Exemplo: border-color: red; ou border-color: #FF0000;

Definindo Bordas para Lados Específicos

Você pode aplicar a shorthand border ou as propriedades individuais para lados específicos:

  • border-top / border-right / border-bottom / border-left:
    • Exemplo: border-top: 1px dashed blue;
  • border-top-width / border-top-style / border-top-color (e assim por diante para os outros lados):
    • Exemplo: border-left-color: green;

border-radius: Cantos Arredondados

Uma propriedade muito utilizada junto com border é border-radius, que permite arredondar os cantos de um elemento.

  • Sintaxe: border-radius: valor;
  • Valores: Comprimento (px, em, rem) ou porcentagem (%).
  • Exemplo: border-radius: 8px; (arredonda todos os 4 cantos em 8px).
  • Exemplo: border-radius: 50%; (transforma um elemento quadrado em um círculo, ou um retângulo em uma elipse).

Efeito da border no tamanho total do elemento

Assim como o padding, a border também aumenta o tamanho total de um elemento (a menos que você use box-sizing: border-box;).

Se um div tem width: 100px; e border: 2px solid black;, a largura total visível do div será: 100px (conteúdo) + 2px (borda esquerda) + 2px (borda direita) = 104px.

Se também tiver padding: 10px;, a largura total será: 100px (conteúdo) + 10px (padding esquerdo) + 10px (padding direito) + 2px (borda esquerda) + 2px (borda direita) = 124px.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Border</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .box {
      width: 200px; /* Largura do conteúdo */
      height: 80px; /* Altura do conteúdo */
      background-color: lightblue;
      padding: 10px; /* Padding para todos os exemplos */
      margin-bottom: 20px;
      text-align: center;
      line-height: 80px; /* Para centralizar o texto verticalmente */
      color: #333;
    }

    .border-solid {
      border: 2px solid blue;
    }

    .border-dashed {
      border: 3px dashed green;
    }

    .border-dotted {
      border: 4px dotted purple;
    }

    .border-double {
      border: 5px double orange;
    }

    .border-groove {
      border: 6px groove gray;
      background-color: #ccc; /* Para o efeito 3D ser visível */
    }

    .border-individual-sides {
      border-top: 1px solid red;
      border-right: 2px dashed blue;
      border-bottom: 3px dotted green;
      border-left: 4px double purple;
    }

    .border-radius-square {
      width: 100px;
      height: 100px;
      line-height: 100px;
      border: 2px solid black;
      border-radius: 15px; /* Cantos arredondados */
      background-color: lightyellow;
    }

    .border-radius-circle {
      width: 100px;
      height: 100px;
      line-height: 100px;
      border: 2px solid black;
      border-radius: 50%; /* Transforma em círculo */
      background-color: lightpink;
    }
  </style>
</head>
<body>
  <div class="box border-solid">
    Borda Sólida
  </div>

  <div class="box border-dashed">
    Borda Tracejada
  </div>

  <div class="box border-dotted">
    Borda Pontilhada
  </div>

  <div class="box border-double">
    Borda Dupla
  </div>

  <div class="box border-groove">
    Borda Groove (3D)
  </div>

  <div class="box border-individual-sides">
    Bordas Individuais
  </div>

  <div class="box border-radius-square">
    Cantos Arredondados
  </div>

  <div class="box border-radius-circle">
    Círculo
  </div>
</body>
</html>

Resultado: Inspecione cada caixa com as ferramentas de desenvolvedor para ver como a border afeta o tamanho total do elemento e como os diferentes estilos e border-radius mudam a aparência.

Boas Práticas:

  • Visibilidade: Use bordas para delimitar elementos e melhorar a clareza visual do layout.
  • Consistência: Mantenha um estilo de borda consistente para elementos semelhantes.
  • Cuidado com o Tamanho Total: Lembre-se que a border aumenta o tamanho total do elemento (a menos que você use box-sizing: border-box;).
  • border-radius: Use border-radius para suavizar os cantos e dar um toque mais moderno ao design.

Dominar a propriedade border permite que você adicione definição e estilo visual aos seus elementos, contribuindo para um design mais estruturado e atraente.