Borde y radio

El borde (border) es un atajo de tres valores: ancho, estilo y color, como border: 1px solid oklch(0.9 0 0). El estilo es obligatorio: si falta, vale none y el borde no se dibuja.

El radio (border-radius) redondea las esquinas. Acepta de uno a cuatro valores, que arrancan arriba a la izquierda y siguen como un reloj. Con porcentajes, el radio horizontal se mide sobre el ancho y el vertical sobre el alto: 50% da un círculo en una caja cuadrada y una elipse en una rectangular.

.tarjeta

16px

.pestana

16px 16px 0 0

.avatar

50%

.pildora

Nuevo9999px

1.tarjeta  { border-radius: 16px; }
2.pestana  { border-radius: 16px 16px 0 0; } /* solo arriba */
3.avatar   { border-radius: 50%; }           /* círculo si es cuadrado */
4.pildora  { border-radius: 9999px; }        /* el navegador lo achica */

Cuando una caja redondeada tiene otra adentro, los radios tienen que ser concéntricos: el radio interior es el exterior menos la distancia entre los dos bordes (el relleno, más el ancho del borde si lo hay). Con 16px de radio y 8px de relleno, la caja de adentro lleva 8px. Si el relleno supera al radio, el interior queda en 0.

Mové los controles y desmarcá el radio concéntrico: con el mismo radio en el bloque de color, la franja entre el bloque y el borde de la tarjeta se ensancha en las esquinas. Los círculos naranjas trazan cada radio, y la cota de arriba mide el relleno.

.tarjeta {
  border-radius: 28px;
  padding: 12px;
  box-shadow:
    0 1px 2px oklch(0 0 0 / 6%),
    0 4px 8px oklch(0 0 0 / 6%),
    0 12px 24px oklch(0 0 0 / 8%);
}

@media (prefers-color-scheme: dark) {
  .tarjeta {
    box-shadow:
      0 0 0 1px oklch(1 0 0 / 10%),
      0 1px 2px oklch(0 0 0 / 6%),
      0 4px 8px oklch(0 0 0 / 6%),
      0 12px 24px oklch(0 0 0 / 8%);
  }
}

.muestra {
  border-radius: 16px; /* 28 − 12 */
}

<button class="rounded-[28px] p-3 shadow-[0_1px_2px_oklch(0_0_0/6%),0_4px_8px_oklch(0_0_0/6%),0_12px_24px_oklch(0_0_0/8%)] dark:ring-1 dark:ring-white/10">
  <div class="rounded-2xl"></div>
  …
</button>

Sombras

La sombra (box-shadow) toma desplazamiento horizontal, desplazamiento vertical, desenfoque, extensión y color. El desenfoque y la extensión son opcionales; la extensión agranda la sombra antes de desenfocarla, o la achica si es negativa. Con inset se dibuja adentro de la caja. La sombra sigue el radio y no ocupa lugar: no mueve nada en el layout.

Separadas por comas entran varias sombras, y la primera queda arriba. Una luz real deja una sombra corta y marcada pegada al objeto y otra larga y difusa. Apilar dos o tres sombras chicas con poca opacidad imita eso mejor que una sola grande.

1.tarjeta {
2  box-shadow:
3    0 1px 2px oklch(0 0 0 / 6%),
4    0 4px 8px oklch(0 0 0 / 6%),
5    0 12px 24px oklch(0 0 0 / 8%);
6}
7
8@media (prefers-color-scheme: dark) {
9  .tarjeta {
10    box-shadow:
11      0 0 0 1px oklch(1 0 0 / 10%),
12      0 1px 2px oklch(0 0 0 / 6%),
13      0 4px 8px oklch(0 0 0 / 6%),
14      0 12px 24px oklch(0 0 0 / 8%);
15  }
16}

En modo oscuro una sombra negra casi no contrasta con el fondo. Por eso se suma 0 0 0 1px: sin desplazamiento ni desenfoque y con 1px de extensión, dibuja una línea clara de 1px que marca el contorno como un borde, pero sin ocupar lugar.

Contorno y foco

El contorno (outline) se dibuja por fuera del borde y, como la sombra, no ocupa lugar: aparecer o desaparecer no mueve nada. Desde 2023 todos los navegadores principales lo dibujan siguiendo el radio. outline-offset lo separa del borde; con un valor negativo lo mete adentro.

1. El borde ocupa lugar en el box model; el contorno no.
2. El borde se puede definir lado por lado; el contorno rodea toda la caja.
3. En el modo de alto contraste de Windows (forced-colors) las sombras desaparecen, pero el contorno se mantiene.

Por eso el foco se marca con el contorno. No uses outline: none sin un reemplazo visible: quien navega con el teclado pierde de vista dónde está. Con :focus-visible el contorno aparece al navegar con Tab, pero no al hacer clic en un botón.

1:focus-visible {
2  outline: 2px solid currentColor;
3  outline-offset: 2px;
4}

En Tailwind

En Tailwind el radio usa una escala con nombre: rounded-lg son 8px y rounded-2xl son 16px. La sombra, el anillo y el contorno tienen sus propias clases. Los valores fuera de la escala van entre corchetes, con guiones bajos en lugar de espacios.

1<!-- 16px de radio y 8px de relleno: adentro, 16 − 8 = 8px -->
2<article class="rounded-2xl p-2 shadow-md dark:ring-1 dark:ring-white/10">
3  <img class="rounded-lg" src="foto.jpg" alt="…">
4</article>
5
6<!-- foco visible solo con teclado -->
7<button class="rounded-lg px-4 py-2 focus-visible:outline-2
8               focus-visible:outline-offset-2">
9  Guardar
10</button>