Bordas

A moldura do cartaz no Laboratório Belavista é a border box: estilo, largura, cor e raio. Sem border-style, a borda muitas vezes nem aparece.

O exemplo deste capítulo é 37-bordas, no pacote que acompanha o volume. Troque solid por dashed, preveja, recarregue e confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Declarar border-style, border-width e border-color.
• Usar o atalho border e lados lógicos.
• Arredondar com border-radius.
• Distinguir outline de border.
• Testar dotted/dashed em mais de um navegador.

Sem estilo, sem moldura

O padrão de estilo é none. Defina pelo menos o estilo.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bordas — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <article class="cartaz">
      <h1>Edição limitada</h1>
      <p>Serigrafia em papel bege. Conteúdo fictício do ateliê.</p>
    </article>
  </body>
</html>

.cartaz {
  max-inline-size: 28rem;
  padding: 1.25rem;
  border-style: solid;
  border-width: 2px;
  border-color: #1a1a1a;
  border-radius: 0.35rem;
  background: #f7f4ef;
}

Atalho equivalente: border: 2px solid #1a1a1a;.

Lados e lógicos

.cartaz {
  border-inline-start: 6px solid #8b1e1e;
  border-block-end: 1px dashed #888;
}

Em pt-BR (LTR), border-inline-start cai à esquerda. Se o dir mudar, a barra acompanha o início da linha.

Estilos groove, ridge, inset e outset dependem do navegador para o sombreado — não confie neles para identidade visual crítica.

Raio

.chip {
  border: 1px solid #8b1e1e;
  border-radius: 999px; /* pílula */
}

.cartaz {
  border-radius: 0.5rem 0.5rem 0 0; /* só o topo */
}

Um valor arredonda os quatro cantos; quatro valores percorrem os cantos na ordem do atalho de radius.

Outline ≠ border

outline não entra no cálculo do modelo de caixa e não empurra vizinhos. Serve bem para foco. border ocupa espaço na border box (salvo box-sizing e como você mede).

Erro comum: border: 2px #8b1e1e sem estilo. A declaração fica incompleta e a moldura some. Inclua solid (ou outro estilo).

Critério para avançar

Você avança se: aplica atalho border no cartaz; usa um lado lógico; explica por que outline não soma largura de layout.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual propriedade é obrigatória para a borda aparecer com largura e cor?
2. border-inline-start em lang="pt-BR" padrão corresponde a qual lado físico?
3. Outline aumenta a width do elemento?

Respostas comentadas

1. border-style (direta ou via atalho que inclua o estilo).
2. Esquerda (início da linha em LTR).
3. Não. Outline desenha por fora sem entrar no box model de tamanho.