Domina border-image: modelo de 9 cortes, control de slice/width/repeat, fallbacks y patrones reutilizables para componentes reales.
border-image pinta el marco a partir de una fuente (imagen, SVG o gradiente) recortada en 9 zonas.
Si no defines un borde físico (border), no existe área donde renderizar el borde gráfico.
El ajuste fino depende de cuatro claves: source, slice, width y repeat.
Con fallbacks puedes mantener legibilidad y evitar marcos rotos en contextos no ideales.
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.
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.
Domina border-image: modelo de 9 cortes, control de slice/width/repeat, fallbacks y patrones reutilizables para componentes reales.
Código del tema: display: grid; gap: 1rem;
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.
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.