Bordas

Tipos de utilitárias de borda

1. border

Aplica uma borda padrão (1px, cor cinza, sólida) ao redor do elemento:

<div class="border p-4">Caixa com borda</div>

Você também pode aplicar bordas em lados específicos:

• border-t (topo)

• border-r (direita)

• border-b (inferior)

• border-l (esquerda)

• border-x, border-y (horizontal e vertical)

2. Espessura da borda

<div class="border-2">Borda de 2px</div>
<div class="border-t-4">Borda superior de 4px</div>

Valores disponíveis:

• border, border-0, border-2, border-4, border-8

3. Cor da borda

As cores seguem a mesma escala do sistema de cores do Tailwind:

<div class="border border-gray-300">Borda cinza</div>
<div class="border border-red-500">Borda vermelha</div>

Você pode usar as classes border-{cor}-{intensidade} para definir exatamente a tonalidade desejada.

4. Estilo da borda

• border-solid (padrão)

• border-dashed

• border-dotted

• border-double

• border-none

<div class="border-2 border-dashed border-blue-500 p-4">
  Borda tracejada azul
</div>

Bordas arredondadas (rounded)

O Tailwind também oferece utilitárias para controle de arredondamento de bordas:

<img class="rounded" src="..." alt="Imagem" />
<button class="rounded-full">Botão circular</button>

Classes disponíveis:

Você também pode aplicar por lado:

• rounded-t, rounded-b, rounded-l, rounded-r

• rounded-tl, rounded-tr, rounded-br, rounded-bl

Exemplo prático completo

<div class="border-2 border-indigo-500 rounded-lg p-6">
  <h3 class="text-lg font-semibold mb-2">Cartão com borda</h3>
  <p class="text-gray-600">Este bloco tem borda personalizada e cantos arredondados.</p>
</div>

O sistema de bordas no Tailwind proporciona controle visual direto e sem complexidade, seja para destacar elementos, estruturar layouts ou aplicar estilos visuais consistentes.