¿Cuál es la diferencia entre border y outline en CSS?

Las propiedades border (borde) y outline (contorno) en CSS sirven para dibujar líneas alrededor de un elemento, pero tienen diferencias fundamentales en cómo se comportan, cómo afectan al layout y para qué se utilizan comúnmente:

1. Participación en el modelo de caja y espacio ocupado:
   • border (Borde): Es una parte integral del modelo de caja del elemento. El border ocupa espacio y se dibuja entre el padding y el margin. Por lo tanto, añadir un border puede afectar al tamaño total que el elemento ocupa en la página y puede empujar a los elementos circundantes (a menos que se use box-sizing: border-box;, en cuyo caso el borde se dibuja hacia adentro del width y height definidos).
   • outline (Contorno): El outline se dibuja fuera del borde del elemento, «encima» del área del margin (si lo hubiera) o del contenido adyacente. El outline no ocupa espacio en el layout. Añadir o quitar un outline no afecta al tamaño del elemento ni a la posición de los elementos circundantes. Es como una capa superpuesta.
2. Control por lados:
   • border: Puedes definir y estilizar cada lado del borde de forma individual (border-top, border-right, border-bottom, border-left) con diferentes grosores (border-width), estilos (border-style) y colores (border-color).
   • outline: El outline se aplica uniformemente alrededor de todo el elemento. No puedes tener diferentes grosores, estilos o colores de contorno para cada lado; las propiedades outline-width, outline-style y outline-color se aplican a todo el contorno por igual.
3. border-radius:
   • border: Se ve afectado por la propiedad border-radius, permitiendo crear esquinas redondeadas para el borde.
   • outline: En los navegadores modernos, el outline también sigue la forma definida por border-radius. Históricamente, esto no siempre era así (el outline solía ser siempre rectangular), pero el comportamiento actual es más consistente.
4. Uso común:
   • border: Se utiliza comúnmente para definir los límites visuales de los elementos, con fines decorativos, para crear separaciones estructurales, o como parte integral del diseño de componentes como botones o cajas.
   • outline: Su uso más importante y recomendado es para la accesibilidad: los navegadores lo utilizan por defecto para indicar visualmente qué elemento tiene el foco cuando se navega con el teclado (por ejemplo, en enlaces, botones o campos de formulario). También puede usarse para depuración visual temporal, ya que no altera el layout.

Ejemplo conceptual:

.mi-elemento {
  width: 150px;
  height: 80px;
  margin: 20px;
  padding: 10px;
  border: 5px solid blue;   /* Azul, ocupa espacio, parte del elemento */
  outline: 3px dashed red;  /* Rojo, discontinuo, NO ocupa espacio, se dibuja fuera del borde */
  border-radius: 8px;       /* Afecta tanto al borde como al contorno (en navegadores modernos) */
}Lenguaje del código: PHP (php)

Es una mala práctica de accesibilidad eliminar el outline de los elementos enfocables (con outline: none; o outline: 0;) sin proporcionar una alternativa visual clara y perceptible para el estado de foco, ya que esto dificulta la navegación con teclado.