Propiedad Outline

1️⃣ ¿Qué es Outline?

🎯 ¿Qué es exactamente un "outline"?

El outline es una línea que se dibuja alrededor de un elemento, por fuera del borde. A diferencia del border, el outline no ocupa espacio en el modelo de caja y se dibuja sobre los elementos adyacentes.

🔍 Visualiza el Concepto

SOLO BORDER
Ocupa espacio

BORDER + OUTLINE
Outline fuera del borde

SOLO OUTLINE
No ocupa espacio

🎨 Sintaxis Básica

styles.css CSS 
outline: 2px solid red;

Resultado: Outline rojo de 2px alrededor del elemento

🚀 Características Principales del Outline

📏

No Ocupa Espacio

El outline se dibuja por fuera del modelo de caja, por lo que no afecta el layout ni el flujo de los elementos.

🎨

Siempre Rectangular

Independientemente de la forma del elemento, el outline siempre será rectangular.

⌨️

Enfoque por Defecto

Los navegadores aplican outline automáticamente a elementos enfocados para accesibilidad.

🔍

Propiedad de Shorthand

Outline es una propiedad que combina: width, style y color en una sola declaración.

📋 ¿Dónde se Usa el Outline?

🎯

El outline tiene aplicaciones específicas en el desarrollo web moderno. Estas son las situaciones más comunes donde encontrarás esta propiedad:

🎯 Indicadores de Enfoque

Para mostrar qué elemento tiene el foco cuando se navega con teclado.

button:focus {
    outline: 2px solid #007bff;
}
🚨 Estados de Validación

Para resaltar campos de formulario con errores o advertencias.

.error {
    outline: 2px solid #dc3545;
}
👁️ Mejora de Accesibilidad

Para usuarios que dependen de navegación por teclado o lectores de pantalla.

*:focus {
    outline: 3px dashed #ff6b6b;
}

💻 Ejemplo Real: Botón con Outline

estilos.css CSS 
/* Estilo para botón con outline en foco */
.btn-accesible {
    padding: 12px 24px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-accesible:focus {
    outline: 3px solid #0056b3;
    outline-offset: 2px;
}
🎯 Resultado en Vivo:

Haz clic o usa Tab para enfocar el botón y ver el outline

🔍 Partes clave del código:
  • :focus - Pseudoclase que activa el outline
  • outline: 3px solid #0056b3 - Define el outline
  • outline-offset: 2px - Separa el outline del borde

⚠️ Consideraciones Importantes

🚫
No Remover Outline por Completo

Eliminar completamente el outline rompe la accesibilidad. En su lugar, personalízalo para que sea visualmente atractivo y accesible.

💡
Usar outline-offset

La propiedad outline-offset te permite separar el outline del borde del elemento, creando un efecto visual más atractivo.

ℹ️
Outline no Afecta Layout

Al contrario del border, el outline no afecta las dimensiones del elemento ni el flujo del documento.

🎯 Resumen de la Lección

1
Outline es Externo

Se dibuja por fuera del borde y no ocupa espacio en el modelo de caja.

2
Esencial para Accesibilidad

Indica elementos enfocados para usuarios de teclado y lectores de pantalla.

3
Propiedad Shorthand

Combina outline-width, outline-style y outline-color en una sola declaración.

4
Siempre Rectangular

Independientemente de la forma del elemento, el outline será rectangular.

2️⃣ Outline vs Border

🧭 Diferencias Clave

Border forma parte del modelo de caja: ocupa espacio, afecta el layout y respeta el border-radius. En cambio, el outline se dibuja por fuera del borde, no ocupa espacio y siempre es rectangular (no sigue el radio de borde).

🔍 Comparativa Visual

SOLO BORDER
Ocupa espacio • Respeta border-radius

BORDER + OUTLINE
Outline fuera del borde • No ocupa espacio

SOLO OUTLINE
No ocupa espacio • Siempre rectangular

🧩 ¿Qué cambia realmente?

📐

Modelo de Caja

Border suma al ancho/alto del elemento. Outline no.

🟦

Geometría

Border respeta border-radius. Outline siempre es rectangular.

🔁

Interacción

Outline se usa mucho para enfoque accesible; border para diseño estructural.

🎯

Superposición

Outline no afecta al flujo, por eso puede “salirse” visualmente sin empujar elementos.

comparativa.css CSS 
/* Border ocupa espacio y respeta el radio */
.solo-border {
  border: 6px solid #59e0d6;
  border-radius: 14px;
}

/* Border + Outline: outline queda por fuera sin afectar layout */
.border-outline {
  border: 4px solid #59e0d6;
  outline: 8px solid #ff7b86;
  outline-offset: 10px;
  border-radius: 14px;
}

/* Solo Outline: no modifica el tamaño del elemento */
.solo-outline {
  outline: 8px solid #ff7b86;
  outline-offset: 10px;
  border-radius: 14px;
}

🧪 Mini‑Lab: Ajusta y observa

Solo Border

Border + Outline

Solo Outline

⚠️ Cuándo usar cada uno

💡
Border para estructura

Úsalo para delimitar cajas, tarjetas y contenedores que forman parte del layout.

🧑‍🦯
Outline para estados

Perfecto para enfoque y estados temporales sin modificar el tamaño del elemento.

🚫
No remplaza la accesibilidad

No elimines el outline por completo. En su lugar, personalízalo para que sea consistente con tu diseño.

🧾 Resumen Rápido

1
Border = Layout

Afecta tamaño y respeta radios.

2
Outline = Superposición

No ocupa espacio y es ideal para foco/estados.

3
Offset potencia el efecto

Separa visualmente el outline del borde.

4
Rectangular por definición

No sigue el border-radius (a diferencia del border).

3️⃣ Estilos y Colores

🎨 ¿Qué puedo personalizar?

Con outline puedes ajustar grosor (outline-width), estilo (outline-style) y color (outline-color), o usar la shorthand outline. Además, outline-offset separa visualmente el outline del borde.

🧵 Estilos de Línea

solid

dashed

dotted

double

groove (soporte parcial)

ridge (soporte parcial)

estilos.css CSS 
/* Variaciones de estilo */
.o-solid  { outline: 4px solid  #7dd3fc; }
.o-dashed { outline: 4px dashed #93c5fd; }
.o-dotted { outline: 4px dotted #c4b5fd; }
.o-double { outline: 6px double #ff7b86; }
.o-groove { outline: 6px groove #fca5a5; }
.o-ridge  { outline: 6px ridge  #fdba74; }

🌈 Colores y Contraste

Para estados de enfoque accesibles, el outline debe tener suficiente contraste con el fondo y el contenido. Evita colores demasiado tenues sobre fondos oscuros.

✅

Recomendado

Tonos brillantes sobre fondo oscuro: #7dd3fc, #ff7b86, #f59e0b.

⚠️

Evitar

Colores con bajo contraste o cercanos al color de fondo.

accesible.css CSS 
/* Paleta sugerida en temas oscuros */
:root {
  --o-primary: #59e0d6;
  --o-accent: #ff7b86;
  --o-warn: #f59e0b;
}
.focus-ring:focus {
  outline: 3px solid var(--o-accent);
  outline-offset: 4px;
}

🧪 Mini‑Lab: Estilo, grosor, color y offset

outline: 6px solid #ff7b86; outline-offset: 10px;

🧭 Buenas prácticas

Contraste suficiente

Asegura que el color elegido sea claramente visible en tu tema. Evita tonos cercanos al fondo.

Offset moderado

Entre 4–12px suele ser suficiente. Offsets muy grandes pueden “romper” la composición visual.

Consistencia

Define tokens/variables para reutilizar colores y grosores en todo el proyecto.

🧾 Resumen Rápido

1
Shorthand poderosa

outline: width style color; en una sola línea.

2
Estilos útiles

solid/dashed/dotted son los más consistentes entre navegadores.

3
Color con intención

Usa paletas con alto contraste y consistentes con tu UI.

4
Offset para claridad

Separa el outline del borde para mejorar legibilidad visual.

4️⃣ Outline Offset

🧭 ¿Qué es outline-offset?

outline-offset controla la distancia entre el borde del elemento y su outline. Al aumentar su valor, el outline “se despega” del elemento, sin afectar el layout ni el tamaño real de la caja.

🔍 Efecto del Offset

offset: 0px
Outline pegado al borde

offset: 8px
Separación clara

offset: 16px
Mayor aire visual

offset.css CSS 
.card {
  outline: 8px solid #ff7b86;
  outline-offset: 12px;
  border-radius: 12px;
}

🧩 Patrones con outline-offset

🪄

Enfoque visible

Despega el focus para no “chocar” con el borde: outline-offset: 4–8px.

🧱

Tarjetas destacadas

Imita un “marco externo” elegante sin alterar el layout.

🖼️

Falso padding

Crea separación visual externa sin agregar padding interno.

🧑‍🦯

Accesibilidad

Un offset moderado mejora la legibilidad del estado de foco.

🧪 Mini‑Lab: Juega con el offset

outline: 8px solid #ff7b86; outline-offset: 12px; border-radius: 12px;

🧭 Recomendaciones

Offset equilibrado

Entre 4–12px funciona bien en la mayoría de interfaces. Más de 16px solo para énfasis fuerte.

Combínalo con border

Un borde fino + outline con offset produce un “doble marco” limpio y accesible.

Responsive

En móviles reduce ligeramente el offset para no saturar el espacio.

🧾 Resumen Rápido

1
No afecta layout

El offset solo separa visualmente el outline.

2
Mejora el foco

Hace más legible el estado activo/enfocado.

3
Doble marco elegante

Úsalo junto con un border fino para un efecto premium.

4
Usa valores moderados

4–12px suelen ser suficientes; ajusta según densidad de la UI.

5️⃣ Accesibilidad

♿ ¿Por qué es importante el outline?

El outline es clave para la navegación por teclado (Tab, Shift+Tab) y para usuarios con ayudas técnicas. Un focus visible permite saber qué elemento está activo sin usar el mouse. No elimines el outline: personalízalo para que sea claro y consistente.

👁️ Focus visible: buenas prácticas

✅

Personalizar, no quitar

Usa colores con buen contraste y un outline-offset de 3–6px.

🚫

Evita: outline: none sin reemplazo

Rompe accesibilidad. Si lo quitas, provee un indicador de foco alternativo sólido.

⌨️

Prueba con teclado

Recorre tu UI con Tab/Shift+Tab y verifica que el foco sea visible en todo momento.

🎯

Tamaño/espaciado

El foco no debe desplazar layout; el outline es ideal porque no ocupa espacio.

focus.css CSS 
/* 1) Focus accesible consistente */
.focus-ring:focus,
.focus-ring:focus-visible {
  outline: 3px solid #59e0d6;
  outline-offset: 4px;
  border-radius: 8px;
}

/* 2) Solo mostrar foco cuando viene de teclado (focus-visible) */
.kbd-ring:focus { outline: none; }
.kbd-ring:focus-visible {
  outline: 3px solid #ff7b86;
  outline-offset: 4px;
  border-radius: 8px;
}

/* 3) Alternativa si decides remover outline por estilo: usa box-shadow robusto */
.shadow-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #0ea5e9, 0 0 0 6px rgba(14,165,233,.35);
  border-radius: 8px;
}

🧪 Mini‑Lab: Compara el foco

Navega con Tab y observa el resaltado nativo del navegador.

Foco visible consistente (outline + offset).

El foco solo aparece al usar teclado, no con click.

Tip: Presiona Tab varias veces y verifica que nunca “pierdes” el foco visual.

🧩 Patrones accesibles con outline

Enlaces y botones

Todos los elementos interactivos deben tener un estado de foco visible. Evita removerlo globalmente con *:focus { outline: none; }.

Componentes complejos

En modales/menús, asegura trampa de foco y estilo de foco consistente para los elementos navegables.

Estado y color

Usa colores con alto contraste. Considera prefers-contrast en temas avanzados.

🧾 Resumen Rápido

1
Focus siempre visible

Personaliza el outline, no lo elimines.

2
focus-visible

Muestra el foco solo cuando es relevante (teclado).

3
Contraste y offset

Colores vivos + 3–6px de separación ayudan a la claridad.

4
Pruebas reales

Recorre tu sitio con teclado y lectores de pantalla.

6️⃣ Práctica

practica.css CSS
💡 Ctrl+Enter aplica los cambios

📱 Vista Previa

Se actualiza en tiempo real
Elemento: .mi-outline
Tamaño: 100% × 100%