border

El border es la capa del box model que dibuja un límite visual alrededor del padding y el contenido de un elemento. A diferencia del padding y el margin, que son simplemente espacio vacío (uno con fondo, el otro sin), el border tiene una representación gráfica propia: una línea, un trazo, una forma visible. Es la única capa del box model que “se dibuja” en lugar de simplemente ocupar espacio.

Su posición en el modelo es significativa: el border rodea al padding, que a su vez rodea al contenido. Por eso el border es el límite exterior visible del área “interior” del elemento — lo que visualmente separa el elemento de su entorno. El área hasta el border externo define la superficie visual del elemento; el margin más allá de eso es transparente.

El border también ocupa espacio en el layout: su grosor se suma al tamaño del elemento. Con box-sizing: content-box, agregar border: 2px solid suma 4px al ancho total del elemento (2px a cada lado). Con border-box, el border se descuenta del área de contenido y el elemento mantiene sus dimensiones declaradas. Esta distinción es crítica al trabajar con elementos que deben encajar en un layout preciso.

Cómo funciona

Para que un border sea visible, las tres sub-propiedades deben estar activas:

1. border-width — el grosor de la línea.
2. border-style — el tipo de línea (solid, dashed, dotted, etc.).
3. border-color — el color de la línea.

El valor por defecto de border-style es none, lo que significa que un border declarado sin estilo es completamente invisible, aunque se hayan definido grosor y color. Esta es la causa del gotcha más común: definir border-width y border-color pero olvidar border-style, y preguntarse por qué no aparece el borde.

Sintaxis

/* Shorthand: grosor · estilo · color (cualquier orden, pero este es el más legible) */
.caja {
  border: 2px solid #0d9488;
}

/* Sub-propiedades separadas */
.caja {
  border-width: 2px;
  border-style: solid;
  border-color: #0d9488;
}

/* Bordes por lado */
.caja {
  border-top: 4px solid #0d9488;
  border-right: 1px dashed #94a3b8;
  border-bottom: 2px dotted #f97316;
  border-left: none;
}

/* Sin borde */
.caja {
  border: none;  /* equivale a border-style: none */
}

Sub-propiedades y valores

border-style (obligatoria para que el border sea visible)

Define el tipo de línea. Sin este valor (o con none), el border no se dibuja independientemente de los otros valores.

En la práctica real, solid, dashed y dotted cubren el 99% de los casos. Los estilos 3D (groove, ridge, inset, outset) pertenecen a la estética de los años 90 y rara vez se usan hoy.

border-width

El grosor del borde en cualquier unidad de longitud. También acepta keywords:

• thin — borde delgado (equivale aproximadamente a 1px)
• medium (default) — borde de grosor medio (≈3px)
• thick — borde grueso (≈5px)

En producción se prefieren valores en px por su precisión. Las keywords thin/medium/thick son imprecisas — el navegador decide el valor exacto.

border-color

Cualquier valor de color CSS válido: nombres de color, hex, rgb(), hsl(), oklch(), etc. El valor por defecto, cuando no se especifica, es currentColor — el color de texto heredado del elemento. Esto significa que border: 2px solid sin color produce un borde del mismo color que el texto del elemento.

Lados individuales y shorthand por lado

Cada lado tiene su propio shorthand y sus propias sub-propiedades:

/* Shorthand por lado */
border-top:    2px solid teal;
border-right:  1px dashed gray;
border-bottom: 3px dotted orange;
border-left:   none;

/* Sub-sub-propiedades (máximo control) */
border-top-width: 2px;
border-top-style: solid;
border-top-color: teal;

Árbol completo de propiedades border

border                     ← shorthand completo (los 4 lados)
├── border-width           ← grosor (shorthand, acepta 1-4 valores TRBL)
│   ├── border-top-width
│   ├── border-right-width
│   ├── border-bottom-width
│   └── border-left-width
├── border-style           ← estilo (shorthand, acepta 1-4 valores TRBL)
│   ├── border-top-style
│   ├── border-right-style
│   ├── border-bottom-style
│   └── border-left-style
├── border-color           ← color (shorthand, acepta 1-4 valores TRBL)
│   ├── border-top-color
│   ├── border-right-color
│   ├── border-bottom-color
│   └── border-left-color
├── border-top             ← shorthand del lado superior
├── border-right           ← shorthand del lado derecho
├── border-bottom          ← shorthand del lado inferior
└── border-left            ← shorthand del lado izquierdo

Los shorthands de sub-propiedad (border-width, border-style, border-color) también aceptan 1–4 valores con el mismo patrón TRBL que padding y margin:

border-width: 2px 4px;       /* top/bottom: 2px · left/right: 4px */
border-style: solid dashed;  /* top/bottom: solid · left/right: dashed */

Border vs. outline

El outline se parece visualmente al border pero tiene un comportamiento completamente diferente:

El outline existe casi exclusivamente para los estilos de foco en accesibilidad — no lo eliminés con outline: none sin reemplazarlo con otro indicador visual. El redondeo de esquinas es border-radius (ver la entrada de border-radius). Las sombras exteriores son box-shadow (ver la entrada de box-shadow).

Ejemplo realista

/* Tarjeta con borde superior de acento */
.tarjeta {
  border: 1px solid #e2e8f0;   /* borde sutil en todos los lados */
  border-top: 4px solid #0d9488; /* acento de color arriba */
  border-radius: 6px;
  padding: 20px;
}

/* Input con estado de foco */
.input {
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 8px 12px;
  outline: none;
}
.input:focus {
  border-color: #0d9488;
  border-width: 2px;
}

Cuándo usarlo

Notas, gotchas e interacción

• border-style: none es el default. Sin declarar estilo, el borde es invisible aunque se declare width y color. El shorthand border: 2px solid declara los tres de una vez, evitando este problema.
• El border ocupa espacio en layout (con content-box). Agregar border: 2px solid suma 4px al ancho y 4px al alto del elemento. Con border-box, se descuenta del contenido interior. Cicatriz del sandbox de este sitio: el sandbox inyecta *{box-sizing:border-box} (docs/CICATRICES.md A.1.7), por lo que en los ejercicios el border nunca agranda el elemento.
• El shorthand border resetea todos los lados. Si combinás border: 2px solid teal con border-bottom: none, el orden importa: el último shorthand escrito en el mismo nivel de especificidad gana. Poner border-bottom después de border funciona; al revés, border sobreescribe border-bottom.
• border: none vs border: 0: ambos eliminan el border. border: none establece border-style: none; border: 0 establece border-width: 0. El efecto visual es igual, pero border: none es la forma más clara y semántica.
• border-radius redondea las esquinas del border y del fondo. No es sub-propiedad de border sino de la familia de fondos y bordes. Se puede usar aunque no haya border declarado — redondea el fondo. Ver la entrada de border-radius.

Vigente / legacy

No hay forma legacy para border. La propiedad y todas sus sub-propiedades son parte de CSS2.1 y están universalmente soportadas. Los prefijos vendor nunca fueron necesarios. Las propiedades lógicas (border-block-start, border-inline-end, etc.) son una adición moderna para layouts internacionales, pero son una extensión, no un reemplazo.