Bordas CSS

O que é

Duas coisas moram aqui. A borda: a linha em volta de uma caixa — grossura, de que lado, e se é lisa, tracejada ou pontilhada. E o raio: o arredondado dos cantos, do reto ao círculo. A cor da borda é outra classe, da página Cores semânticas (bd-pri, bd-err…) ou da Paleta estendida (Lazul…). O atalho mais usado é bd: borda fina de 1 px na cor neutra do tema.

É só CSS. Você junta as peças: grossura (bd-1…bd-5) + estilo (bd-dsh tracejada, bd-dot pontilhada) + cor (bd-mut, bd-pri…) + canto (r-p…r-fl). Os cantos seguem a mesma régua de nomes do espaçamento (p, m, g, gg, xl) e vêm das variáveis --sw-r-*. O canto padrão dos componentes do SW Core é o r-m (8 px): discreto, sem exagero.

Quando usar

• Card ou caixa: bd r-m (borda fina neutra + canto suave).
• Separar itens de uma lista: só a linha de baixo — bd-b bd-mut.
• Área de "solte o arquivo aqui" ou espaço vazio: bd-2 bd-dsh bd-mut.
• Destacar o item escolhido: bd-2 bd-pri.
• Foto de perfil redonda ou etiqueta em cápsula: r-fl.

Comece aqui

1. 1

   Coloque o SW Core no <head>. Todas as classes de borda e canto estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Borda fina neutra + canto suave numa classe cada.

   Horário: ter a sáb, 9h às 20h

   <div class="bd r-m p-m">Horário: ter a sáb, 9h às 20h</div>

3. 3

   Quer outra? Monte com grossura + estilo + cor.

   Arraste a foto para cá

   <div class="bd-2 bd-dsh bd-pri r-m p-m">Arraste a foto para cá</div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<ul class="bd r-m">
  <li class="flx j-sb px-m py-p bd-b bd-mut"><span>Corte</span><span>R$ 45</span></li>
  <li class="flx j-sb px-m py-p bd-b bd-mut"><span>Barba</span><span>R$ 35</span></li>
  <li class="flx j-sb px-m py-p"><span>Corte + barba</span><span>R$ 70</span></li>
</ul>

<div class="bd-2 bd-dsh bd-mut r-m p-gg t-ct">
  <i class="swi-cloud-upload t-xg t-pri"></i>
  <p>Arraste as fotos do imóvel para cá</p>
</div>

<div class="l l-3 gap-m">
  <div class="bd r-m p-m t-ct">Mensal</div>
  <div class="bd-2 bd-pri r-m p-m t-ct t-pri fw6">Anual</div>
  <div class="bd r-m p-m t-ct">Vitalício</div>
</div>

<div class="aviso bg-inf-soft r-p p-m">
  <strong>Dica:</strong> agende com 2 dias de antecedência no fim de semana.
</div>

<style>
  .aviso { border-left: 4px solid var(--sw-inf); }  /* lado único grosso = seu CSS */
</style>

Precisa de quê

• swcore.min.css — todas as classes desta página.
• swcore.compl.min.css — só para cor L… e ícones swi-*.

Cuidados — erros comuns

• bd-pri (cor) sozinho não desenha borda: precisa de uma grossura (bd, bd-1…).
• bd-1…bd-5 sem cor ficam na cor do texto. Para a neutra do tema, junte bd-mut (ou use o atalho bd).
• Faixa grossa só de um lado: bd-4 bd-l não faz isso — o bd-4 desenha os 4 lados com 4 px e o bd-l deixa a esquerda com 1 px. Para faixa grossa num lado, use o seu CSS: border-left: 4px solid var(--sw-inf); (receita acima).
• Canto muito redondo em caixa grande parece amador. Card e botão: r-p ou r-m. r-fl só para cápsula, etiqueta e foto redonda.
• r-fl só vira círculo se a caixa for quadrada (largura = altura).

O que ele não faz

• Grossura de lado único é só 1 px (bd-t, bd-l…). Mais grossa num lado só, no seu CSS.
• Não tem canto por lado (só o de cima, só o da esquerda). Para isso, border-radius no seu CSS com var(--sw-r-*).