Forma y sombra de la caja

Después de pintar el fondo, el siguiente paso en el acabado visual de una caja es controlar su forma (esquinas redondeadas) y su profundidad (sombra). Estas dos propiedades no modifican el layout — son puramente visuales y se aplican encima de lo ya definido.

---

border-radius — esquinas redondeadas

border-radius redondea las esquinas de la caja. No altera el box model ni el flujo del documento:

.card   { border-radius: 8px; }    /* esquinas suavemente redondeadas */
.badge  { border-radius: 4px; }    /* curvatura mínima */
.pill   { border-radius: 9999px; } /* "pastilla" — semicírculos en cada extremo */

El valor 9999px es el truco habitual para la forma de pastilla: cuando el radio supera la mitad del alto del elemento, las esquinas forman semicírculos perfectos.

border-radius: 50% — el círculo

Si el elemento es un cuadrado (mismo width y height), border-radius: 50% lo convierte en un círculo perfecto:

.avatar {
  width: 80px;
  height: 80px;      /* cuadrado */
  border-radius: 50%; /* → círculo */
}

Si el elemento no es cuadrado (ancho ≠ alto), 50% produce una elipse, no un círculo.

Control por esquina

Podés especificar un radio diferente para cada esquina:

/* 4 valores: top-left, top-right, bottom-right, bottom-left (sentido horario) */
.card { border-radius: 8px 8px 0 0; } /* solo esquinas superiores */

/* Longhands por esquina */
.card {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Nota del motor: el validador usa la longhand border-top-left-radius para comprobar el radio — es la propiedad más robusta en computed style. Cuando todas las esquinas son iguales (el caso habitual), validar una es suficiente.

---

box-shadow — sombras de la caja

box-shadow añade una o más sombras al exterior (o interior) de la caja. La sombra no ocupa espacio en el layout — no desplaza elementos vecinos.

Los 5 valores en orden

/* offset-x  offset-y  blur  spread  color */
.card { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.15); }

Posición	Nombre	Qué controla
1°	offset-x	Desplazamiento horizontal. Positivo = derecha, negativo = izquierda.
2°	offset-y	Desplazamiento vertical. Positivo = abajo, negativo = arriba.
3°	blur-radius	Difuminado. 0 = sombra dura y definida. Siempre positivo.
4°	spread-radius	Expansión. Positivo = sombra más grande; negativo = más pequeña. Opcional (default 0).
5°	color	Color de la sombra. Opcional.

Ejemplos de sombras habituales:

.card-sutil    { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }
.card-media    { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); }
.card-elevada  { box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.2); }
.card-dura     { box-shadow: 6px 6px 0px #1e3a5f; } /* sin blur */

inset — sombra interior

La keyword inset al inicio hace que la sombra sea interior en vez de exterior:

.input:focus {
  box-shadow: inset 0 0 0 2px #3a7bd5; /* "borde" de foco interior */
}

Múltiples sombras

Separadas por coma, las sombras se apilan — la primera en la lista queda “encima”:

.card {
  box-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.1),
    0px 8px 16px rgba(0, 0, 0, 0.15);
}

---

Tu turno: en el sandbox, convertí .avatar en círculo, redondeá .card y agregale sombra, y aplicá la forma pastilla a .badge.