Outline en CSS
Ya puedes dibujar un borde (border). Outline es una herramienta cercana con otro trabajo: dibuja un anillo fuera de la caja del borde y — a diferencia del border — no ocupa espacio de diseño. Los vecinos no se mueven al añadir un outline.
Outline frente a border
Mantén estas dos herramientas separadas en tu mapa mental.
📊 Outline vs border
| Característica | Outline | Border |
|---|---|---|
| Espacio de diseño | No ocupa espacio; el tamaño de la caja no cambia | Ocupa espacio; puede agrandar la caja del borde |
| Lugar habitual | Fuera del borde | Alrededor del padding |
| Uso común | Anillos de foco, énfasis temporal | Bordes permanentes de UI y marcos de tarjeta |
| En el cálculo de tamaño del modelo de caja | No | Sí (con content-box por defecto) |
Un outline sencillo
Estilo, grosor y color funcionan parecido al border — pero el anillo se sitúa fuera.
Outline básico
css.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}Atajo outline
El trío familiar: grosor, estilo y color. El estilo es necesario para que se vea — outline: 2px #000 solo no basta.
Atajo outline
css.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}Estilos comunes de outline
Solid, dashed y dotted son opciones cotidianas. outline: none quita el anillo — úsalo con cuidado (ver foco abajo).
Muestras de estilo outline
css.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }outline-offset — aleja el anillo
outline-offset mueve el outline lejos del borde sin cambiar el tamaño de diseño. Valores positivos empujan hacia fuera; negativos tiran hacia dentro.
Outline con offset
css.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}Misma apariencia, distinto coste de diseño
Dos cajas pueden verse parecidas, pero solo el border cambia cuánto espacio ocupa el elemento.
El border crece; el outline no
css.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}
.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* Ambos se ven potentes; .with-border ocupa más ancho de diseño */Hábito amable con el foco
Los navegadores suelen usar outline (o un anillo parecido) para el foco de teclado. No pongas outline: none en todo. Si restilas el foco, ofrece un anillo sustituto claro para que quienes usan teclado sepan dónde están.
Mantén un anillo de foco visible
css.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}Pruébalo tú
- Da a una caja con padding un
bordery unoutlinemás grueso — los vecinos se quedan. - Cambia el estilo del outline entre
solid,dashedydotted. - Añade
outline-offset: 8pxy mira el anillo flotar hacia fuera. - Compara
.with-bordery.with-outlinelado a lado — peso visual similar, ancho de diseño distinto. - Estila
:focus-visibleen un botón en lugar de quitar outlines globalmente.
Errores comunes
- Tratar el outline como border al calcular el ancho de diseño (el outline no añade tamaño)
- Usar
outline: noneen todos los elementos sin reemplazo de foco - Esperar que el outline empuje a los vecinos (eso lo hacen margin o border)
- Escribir grosor y color sin estilo (
solid/dashed/ …) - Confundir outline con las capas del modelo de caja que acabas de aprender
Resumen
- El outline se dibuja fuera del border y no ocupa espacio de diseño
- El atajo usa grosor, estilo y color — el estilo es necesario
outline-offsetmueve el anillo sin cambiar el tamaño de la caja- Border para bordes permanentes; outline para foco y anillos temporales
- Mantén un outline de foco visible (o un reemplazo equivalente) para teclado
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior