outline

outline es una propiedad CSS que dibuja un contorno visible alrededor del borde de un elemento, por fuera de él. Visualmente se parece a border, pero hay tres diferencias fundamentales que cambian cuándo y cómo usarlo: el outline no ocupa espacio en el layout, no sigue el border-radius, y siempre afecta a los cuatro lados a la vez — no se puede aplicar por lado individual.

La consecuencia más importante de que no ocupe espacio es que agregar o quitar el outline no desplaza a ningún elemento vecino, no agranda el elemento y no afecta ningún cálculo de dimensiones. El outline se “dibuja encima” del layout existente, como si flotara alrededor del borde. Esto lo hace ideal para estados visuales transitorios como el foco: aparece y desaparece sin que la página se mueva.

El outline existe principalmente para los indicadores de foco de accesibilidad. Cuando un usuario navega con teclado y el foco llega a un elemento interactivo (botón, enlace, input), el navegador aplica automáticamente un outline visible por defecto — outline: auto o un estilo dependiente del sistema operativo. Eliminar ese outline con outline: none sin reemplazarlo por otro indicador visual equivale a hacer el sitio inutilizable para personas que navegan con teclado.

Cómo funciona

El outline se dibuja por fuera del borde del elemento (entre el borde y el margin). El espacio entre el borde y el outline se controla con outline-offset. El navegador pinta el outline encima de lo que haya en esa zona — puede superponerse con otros elementos, con el fondo del padre, o con otros outlines.

El outline no sigue el border-radius del elemento: un elemento con border-radius: 8px y un outline tendrá las esquinas del outline rectas (rectangulares). En algunos navegadores modernos el outline puede mostrarse levemente redondeado siguiendo una heurística propia, pero no hay garantía — si se necesita un contorno redondeado que siga el radio, box-shadow con spread es la alternativa.

Sintaxis

/* Shorthand: grosor estilo color (mismo orden que border) */
.foco { outline: 2px solid #0d9488; }

/* Sub-propiedades */
.foco {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #0d9488;
}

/* Con offset (espacio entre borde y outline) */
.foco {
  outline: 2px solid #0d9488;
  outline-offset: 4px; /* espacio entre el borde y el outline */
}

/* Resetear el outline del navegador (⚠ solo si se reemplaza) */
.boton {
  outline: none;
  /* OBLIGATORIO: reemplazarlo con algo visible */
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.5);
}

Sub-propiedades y outline-offset

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

Igual que border-style, define el tipo de línea. Sin estilo declarado (o con none), el outline no se dibuja.

outline-width

El grosor del contorno. Acepta cualquier unidad de longitud o las keywords thin, medium, thick.

outline-color

Cualquier valor de color CSS. Si se usa invert (legacy), invierte los colores del área que cubre — era útil para contraste en cualquier fondo pero no está soportado en todos los navegadores modernos.

outline-offset (sub-propiedad independiente)

outline-offset controla el espacio entre el borde exterior del elemento y el outline. Es una propiedad separada — no va dentro del shorthand outline.

/* outline pegado al borde */
.pegado { outline: 2px solid #0d9488; outline-offset: 0; }

/* outline con espacio */
.separado { outline: 2px solid #0d9488; outline-offset: 4px; }

/* outline dentro del elemento (valor negativo) */
.interior { outline: 2px solid #fff; outline-offset: -4px; }

Valores negativos mueven el outline hacia adentro del borde — el outline se dibuja encima del fondo del elemento. Es útil para indicadores de foco en elementos con imágenes de fondo donde el outline exterior se perdería.

outline vs border — las diferencias clave

El outline y la accesibilidad

El indicador de foco visible es un requisito de accesibilidad (WCAG 2.1 criterio 2.4.7 “Focus Visible”). Los usuarios que navegan con teclado — personas con movilidad reducida, usuarios avanzados, personas que usan tecnologías asistivas — dependen del indicador de foco para saber dónde está el cursor del teclado.

El enfoque recomendado moderno es usar :focus-visible en lugar de :focus. :focus-visible aplica el estilo de foco solo cuando el navegador determina que el foco fue provocado por teclado (no por clic de mouse), lo que evita el outline molesto al hacer clic en botones.

/* ✓ Correcto: outline visible en foco de teclado */
.boton:focus-visible {
  outline: 3px solid #0d9488;
  outline-offset: 2px;
}

/* ✓ Correcto: outline reemplazado por box-shadow (redondeado y visible) */
.boton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.5);
}

/* ✗ Incorrecto: outline eliminado sin reemplazo */
.boton:focus {
  outline: none; /* nunca hacer esto sin reemplazo */
}

Cuándo usar outline vs alternativas

Notas, gotchas e interacción

• Nunca eliminar el outline sin reemplazarlo. outline: none o outline: 0 en :focus o * es un error de accesibilidad. Siempre ofrecer un indicador alternativo visible: un box-shadow de foco, un cambio de border-color, un cambio de background-color.
• outline-offset es una propiedad separada. No va en el shorthand outline. Se declara aparte: outline: 2px solid teal; outline-offset: 4px.
• El outline puede cortarse en contenedores con overflow: hidden. Como el outline se dibuja fuera del borde, un overflow: hidden en el padre puede ocultarlo. El workaround es usar box-shadow en lugar de outline en esos contextos.
• outline: auto en :focus. Usar auto en lugar de un valor específico delega el estilo al sistema operativo/navegador. Es una opción válida cuando se quiere respetar el estilo nativo de la plataforma (útil para extensiones, widgets, o componentes que deban verse “nativos”).
• Las esquinas del outline son rectangulares. Aunque en Chrome y Safari modernos el outline puede seguir levemente el border-radius, este comportamiento no está garantizado en todos los contextos. Para un contorno de foco redondeado consistente, box-shadow con spread es más predecible.

Vigente / legacy

outline existe desde CSS2.1 y está universalmente soportado. outline-offset es CSS3 (Baseline widely). El valor invert para outline-color fue removido del estándar y no tiene soporte fiable — no lo uses.