CSS

Bordes avanzados con border-image

Domina border-image: modelo de 9 cortes, control de slice/width/repeat, fallbacks y patrones reutilizables para componentes reales.

¿Cuánto sabes de CSS?

📘 Teoría

Modelo mental: 9 cortes y área de borde

El navegador divide la fuente en una cuadrícula 3x3: cuatro esquinas, cuatro lados y un centro. Normalmente solo se usa el perímetro; el centro puede incluirse con fill.

Primero crea el área con border, luego aplica border-image. Si olvidas ese paso, parecerá que la propiedad no funciona.

Patrón base fiable

.box {
  border: 10px solid transparent;
  border-image-source: linear-gradient(120deg, #2563eb, #7c3aed);
  border-image-slice: 1;
}

slice, porcentajes y fill

slice define dónde se corta la fuente: números (px de la imagen) o porcentajes.
fill conserva también la zona central, útil para marcos texturizados tipo sticker.
Un slice mal calibrado deforma esquinas; empieza con 1 en gradientes y ajusta más en imágenes reales.

Recorte con imagen y centro opcional

.sticker {
  border: 18px solid transparent;
  border-image-source: url('/img/frame.png');
  border-image-slice: 32 fill;
  border-image-width: 18;
  border-image-repeat: round;
}

width, repeat y estabilidad visual

border-image-width controla el grosor final del borde gráfico y no siempre coincide con border-width. Mantén una relación coherente para no romper proporciones.

repeat suele ser la opción más segura para patrones; round evita recortes raros cuando el tamaño no encaja exacto.

Marco robusto para cards

.card {
  border: 12px solid transparent;
  border-image: linear-gradient(135deg, #0ea5e9, #8b5cf6, #f43f5e) 1 / 12px / 0 round;
  border-radius: 14px;
}

Fallback progresivo

Define un border-color útil antes de border-image para mantener contraste.
Usa @supports para activar el borde avanzado solo cuando compense.
Evita depender del marco para comunicar estado crítico (accesibilidad).

Fallback + mejora progresiva

.notice {
  border: 2px solid #7c3aed;
}

@supports (border-image: linear-gradient(red, blue) 1) {
  .notice {
    border: 10px solid transparent;
    border-image: linear-gradient(90deg, #7c3aed, #06b6d4) 1;
  }
}