06 · Box model

Border

El borde necesita tres cosas para verse: un ancho (border-{n}), un estilo (sólido por defecto) y opcionalmente un color. Sin ancho, el color no se nota.

Ancho de borde

border (1px) es el default cuando solo escribes 'border'. border-{n} usa la misma escala numérica que margin/padding pero en píxeles, no en rem.

border

border-2

border-4

<div class="border border-stone-400">border (1px)</div>
<div class="border-2 border-stone-400">border-2</div>
<div class="border-4 border-stone-400">border-4</div>

→border a secas ya te da border-width: 1px + border-style: solid (gracias a Preflight, que define border-style: solid por defecto en todos los elementos).

Borde por lado

border-t, border-r, border-b, border-l aplican solo a un lado. Muy común para separar filas de una tabla o items de una lista sin encerrar cada uno en una caja.

Fila 1

Fila 2

Fila 3 (sin borde)

<div class="border-b-2 border-amber-500">
  Solo borde inferior
</div>

→Combínalo con divide-y en el padre para poner el mismo borde entre todos los hijos automáticamente, sin repetir la clase en cada uno.

Estilo de borde

border-solid, border-dashed, border-dotted, border-double cambian el trazo. Solid es el default.

dashed

dotted

double

<div class="border-2 border-dashed border-stone-500">dashed</div>
<div class="border-2 border-dotted border-stone-500">dotted</div>
<div class="border-4 border-double border-stone-500">double</div>

Color y opacidad de borde

border-{color}-{shade} usa la misma paleta que el resto de Tailwind. Se le puede agregar opacidad con la notación /valor.

100%

40%

<div class="border-4 border-amber-500">sólido</div>
<div class="border-4 border-amber-500/40">40% opacidad</div>

Border radius (esquinas redondeadas)

rounded-{tamaño} redondea las 4 esquinas. Hay variantes por esquina (rounded-tl, rounded-br, etc.) y por lado (rounded-t, rounded-r...).

full

<div class="rounded-md">md</div>
<div class="rounded-xl">xl</div>
<div class="rounded-full">full (círculo/píldora)</div>

→rounded-full sobre un elemento cuadrado (mismo width y height) da un círculo perfecto; sobre uno rectangular da una píldora.

Esquinas individuales

rounded-tl-{n}, rounded-tr-{n}, rounded-br-{n}, rounded-bl-{n} controlan cada esquina por separado — útil para tarjetas tipo 'chat bubble'.

Burbuja de chat

<div class="rounded-2xl rounded-bl-none bg-amber-100">
  Burbuja de chat
</div>