Border: sub-propiedades y shorthand

El border es la línea que rodea el padding. Para que sea visible, las tres sub-propiedades deben estar activas: grosor (border-width), estilo (border-style) y color (border-color).

El dato crítico: `border-style` por defecto es `none`

Sin declarar un estilo, el border no aparece aunque declares grosor y color:

/* ❌ El borde NO aparece: border-style sigue siendo none */
.box {
  border-width: 2px;
  border-color: teal;
}

/* ✅ El borde SÍ aparece: los tres atributos declarados */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: teal;
}

El shorthand `border`

La forma más común y concisa declara los tres valores en un solo shorthand:

/* width | style | color */
.box {
  border: 2px solid teal;
}
/* equivale a border-width: 2px; border-style: solid; border-color: teal; */
/* y aplica a los CUATRO lados */

El orden width | style | color es el más legible, aunque el shorthand los acepta en cualquier orden.

Bordes por lado

Podés controlar cada lado por separado con border-top, border-right, border-bottom, border-left — o sus sub-propiedades individuales:

.box {
  border: 3px solid teal;          /* los 4 lados */
  border-bottom: 2px dashed gray;  /* sobreescribe solo el bottom */
}

/* o las sub-sub-propiedades */
.box {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: teal;
}

Estilos comunes de `border-style`

Valor	Efecto
`solid`	Línea sólida continua — la más usada
`dashed`	Línea de guiones
`dotted`	Línea de puntos
`none`	Sin borde (valor por defecto)

Lo que no podés leer: el shorthand `border` via `getComputedStyle`

El validador del sandbox usa getComputedStyle para verificar tu CSS. El shorthand border no tiene valor computado como propiedad compuesta — el motor debe leer las sub-propiedades por separado (border-top-style, border-top-color, etc.). Por eso los checks de esta lección validan las sub-propiedades, no el shorthand. Cuando escribís border: 3px solid teal, el check lee border-top-style → "solid" y border-top-color → canonizado a rgb(0, 128, 128).

Un detalle del motor: el grosor (border-top-width) no se puede validar de forma fiable, porque el navegador computa el ancho de un borde como 0px cuando no hay border-style activo. Por eso los checks de esta lección comprueban estilo y color (que ya prueban que el borde existe y es el correcto), no el grosor en px.

Nota sobre colores: el motor del sandbox canoniza los nombres de color a su valor rgb() internamente, así que usar equals: "teal" funciona igual que usar el rgb explícito.

Tu turno: agregá el borde sólido completo y el border-bottom diferente. Si el borde no aparece, revisá que hayas declarado border-style (o el shorthand border que lo incluye).