Fondos y bordes

Las propiedades de fondos y bordes son las que decoran la superficie visual de una caja HTML sin alterar su flujo ni su tamaño en el layout. Toda la decoración que envuelve al contenido — el color o imagen de fondo, las esquinas redondeadas, las sombras, el contorno de foco — pertenece a esta categoría. Son propiedades de presentación pura: modificarlas no desplaza otros elementos, no cambia el width ni el height calculado, y no afecta a los hijos de la caja.

Para entender esta categoría es fundamental relacionarla con el box model: el fondo de un elemento se extiende desde el límite exterior del border hacia adentro, cubriendo tanto el padding como el área de contenido. El margin, en cambio, es siempre transparente — el fondo nunca llega hasta ahí. Esta distinción explica por qué un background-color se ve dentro del borde pero nunca fuera.

El fondo puede estar compuesto por múltiples capas. CSS permite apilar varias imágenes de fondo sobre un color base, cada una con su propia posición, tamaño y modo de repetición. Las capas se declaran en orden de pintado de arriba hacia abajo: la primera declaración es la capa más al frente; el background-color siempre queda debajo de todo. Esta arquitectura en capas permite efectos visuales complejos sin imágenes externas — gradientes, patrones y overlays se consiguen combinando capas background-image.

Cómo funciona

Fondo — color e imagen

background-color establece el color sólido de fondo. Es la capa más baja de la pila. Acepta cualquier valor de color CSS: nombre, hex, rgb(), hsl().

background-image superpone una imagen (o gradiente) sobre el color de fondo. El valor más común es url() con una ruta de imagen, pero también acepta linear-gradient(), radial-gradient() y otras funciones de imagen CSS. Cuando no hay imagen que cargar, un gradiente es el camino más eficiente.

background es el shorthand que combina todas las sub-propiedades de fondo en una sola declaración: color, imagen, posición, tamaño, repetición, origen y clip. El shorthand es cómodo para declaraciones simples, pero puede sobreescribir propiedades no declaradas con sus valores iniciales — en stacks multi-capa, las longforms (background-color, background-image, etc.) son más predecibles.

Ver background, background-color, background-image.

Formas y sombras

border-radius redondea las esquinas de la caja. El valor es el radio del círculo imaginario que define la curva: border-radius: 8px redondea todas las esquinas 8px. Con border-radius: 50% en una caja cuadrada se obtiene un círculo perfecto. Se puede controlar cada esquina individualmente con las longforms (border-top-left-radius, etc.) o con la notación de dos valores del shorthand para esquinas elípticas.

box-shadow proyecta una sombra desde el borde exterior del elemento. La sintaxis básica es offset-x offset-y blur-radius color. El parámetro spread-radius opcional expande o contrae la sombra. La palabra clave inset convierte la sombra en interior (se proyecta hacia adentro del elemento). Al igual que los fondos, box-shadow acepta múltiples sombras separadas por coma — útil para efectos de elevación o bordes decorativos sin usar border.

Ver border-radius, box-shadow.

Outline

outline es un contorno que se dibuja fuera del border, sin ocupar espacio en el layout (no afecta al box model ni desplaza otros elementos). Su uso principal es la indicación visual de foco de teclado: el navegador aplica outline automáticamente en elementos focusables (:focus). Quitarlo sin reemplazarlo con otro indicador visible de foco es un error de accesibilidad — los usuarios de teclado lo necesitan para orientarse.

Ver outline.

Cuándo usar qué

border vs outline: border forma parte del box model — agrega espacio y puede afectar el layout. outline se dibuja encima, fuera del borde, sin afectar el layout. Por eso outline es la herramienta correcta para indicadores de foco: aparece y desaparece sin desplazar otros elementos.

background-color vs background: cuando solo querés establecer el color, background-color es más explícito y seguro. background como shorthand resetea todas las sub-propiedades no declaradas a sus valores iniciales, lo que puede eliminar capas de imagen configuradas previamente con longforms.

box-shadow vs filter: drop-shadow(): box-shadow sigue el rectángulo del border (incluso con border-radius). filter: drop-shadow() sigue la forma visual renderizada del elemento, incluyendo la transparencia — útil para imágenes PNG o SVG con fondo transparente.