Introducción: tarjetas con borde degradado usando border-image

En este artículo detallado veremos cómo crear tarjetas (cards) con bordes degradados usando la propiedad CSS border-image. Cubriremos la teoría, ejemplos prácticos, variantes avanzadas (animaciones, bordes redondeados, doble borde), consideraciones de accesibilidad, compatibilidad entre navegadores y cómo integrar el código en un sitio WordPress (estilos en el tema, Customizer y enqueue en functions.php).

¿Qué hace border-image y por qué usarlo para bordes degradados?

border-image permite usar una imagen (incluidos gradientes CSS) como la pinta del borde de un elemento. Para un borde degradado es útil porque:

• Permite que el degradado siga la zona del borde sin alterar el contenido interior.
• Evita añadir elementos extra en el HTML para simular el borde (menos marcación, más semántica).
• Es fácil de combinar con border-radius para bordes redondeados.

Limitaciones importantes

• El degradado se aplica a la zona del borde no se puede usar para pintar el fondo interior directamente.
• Algunos efectos animados complejos funcionan mejor con pseudo-elementos que con border-image si buscas transiciones suaves.
• En usos avanzados (doble borde complejo, máscaras) puede ser preferible usar pseudo-elementos con mask o background-clip.

Ejemplo mínimo: estructura HTML y CSS básico

HTML de una tarjeta simple (marcado como ejemplo — inclúyelo en tu plantilla o bloque):

ltarticle class=cardgt
  lth3 class=card__titlegtTítulo de la tarjetalt/h3gt
  ltp class=card__bodygtContenido de la tarjeta. Aquí va texto, imágenes o botones.lt/pgt
lt/articlegt

CSS mínimo usando border-image con un degradado lineal:

.card {
  border-width: 4px
  border-style: solid
  border-image-source: linear-gradient(90deg, #ff7a18, #af002d 50%, #319197)
  border-image-slice: 1
  border-radius: 12px
  padding: 1rem
  background: #ffffff
  box-sizing: border-box
}

Notas sobre las propiedades usadas:

• border-width define el grosor visible del borde.
• border-style debe ser distinto de none para que border-image tenga efecto.
• border-image-source acepta un gradiente (linear-gradient, conic-gradient, radial-gradient).
• border-image-slice: 1 indica que tomamos la imagen entera como borde (valor habitual cuando el origen es un gradiente).
• border-radius redondea tanto el fondo como el borde en la mayoría de navegadores modernos.

Controlar el recorte y las esquinas redondeadas

En la mayoría de navegadores modernos, border-image respeta border-radius. Si observas pequeñas líneas o artefactos en las esquinas prueba:

• Aumentar ligeramente border-width y ajustar border-image-slice.
• Usar overflow: hidden en la tarjeta si hay elementos visuales que sobresalen (pero ten cuidado con focus y accesibilidad).
• Como alternativa, crear el borde con un pseudo-elemento para tener control completo sobre capa y máscara.

Ejemplo con radio y sombra interna

.card {
  border: 3px solid transparent / transparente para que border-image actúe /
  border-image: linear-gradient(135deg, #7b2ff7, #f107a3) 1
  border-radius: 14px
  padding: 1.25rem
  background: white
  box-shadow: 0 6px 18px rgba(16,24,40,0.06)
}

Animación del degradado en el borde

Animar directamente border-image-source puede tener soporte irregular. Una técnica más fiable consiste en usar un pseudo-elemento absolutamente posicionado que pinta el borde con un degradado animado y una máscara para dejar el centro transparente.

Código de ejemplo (pseudo-elemento):

.card {
  position: relative
  border-radius: 12px
  background: #fff
  padding: 1.2rem
  z-index: 0
}

/ Pseudo-elemento que pinta el borde degradado /
.card::before {
  content: 
  position: absolute
  inset: 0 / top:0 right:0 bottom:0 left:0 /
  padding: 3px / grosor del borde /
  background: conic-gradient(from 0deg, #ff7a18, #af002d, #319197, #7b2ff7, #ff7a18)
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0)
  -webkit-mask-composite: xor
  mask-composite: exclude
  border-radius: 12px
  z-index: -1
  animation: rotate 6s linear infinite
}

/ animación /
@keyframes rotate {
  to { transform: rotate(1turn) }
}

Explicación breve: el pseudo-elemento ocupa toda la tarjeta, su padding crea la franja que será visible como borde y la máscara (mask) excluye el centro permitiendo que el fondo de la tarjeta se vea. Esta técnica es más versátil para animaciones fluidas que usar border-image.

Variantes prácticas

1. Borde denso y delgado: reduce border-width/padding en el pseudo-elemento para un borde sutil.
2. Doble borde: usa border-image para el borde exterior y un box-shadow o outline interno para la segunda línea.
3. Borde en una sola arista: usa un pseudo-elemento y recorta/máscara para mostrarlo solo en la arista deseada (top, bottom, etc.).
4. Borde segmentado / discontinuo: combina con background-size y repeating-linear-gradient en el pseudo-elemento.

Ejemplo: borde doble (outer gradient inner fine line)

.card {
  position: relative
  border-radius: 12px
  background: white
  padding: 1.25rem
  z-index: 0
  border: 4px solid transparent
  border-image: linear-gradient(90deg,#ff7a18,#7b2ff7) 1
  / línea interna sutil /
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04)
}

Accesibilidad y usabilidad

• Asegura contraste suficiente entre el contenido y el fondo de la tarjeta (el borde no debe interferir con la legibilidad).
• Para tarjetas enfocables (por ejemplo, enlaces o botones dentro de la tarjeta), añade estilos claros en :focus-visible para que los usuarios con teclado vean el foco:

.card:focus-within {
  outline: 3px solid rgba(0, 128, 255, 0.12)
  outline-offset: 4px
}

Compatibilidad y rendimiento

• Compatibilidad: border-image y gradientes están soportados por navegadores modernos (Chrome, Edge, Firefox, Safari). Para detalles y notas puntuales consulta la documentación de cada navegador — por ejemplo MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image.
• Rendimiento: gradientes estáticos son baratos. Animaciones de gradientes pueden provocar repaints costosos. Si necesitas animación continua, prueba a animar transform/opacity o utiliza la técnica del pseudo-elemento con compositing optimizado.

Integración en WordPress

Opción 1 — Añadir el CSS desde el Personalizador (Appearance → Customize → Additional CSS)

Copia y pega el CSS final en “Additional CSS” para probar rápidamente sin tocar archivos del tema. Ideal para ajustes rápidos.

Opción 2 — Añadir CSS en style.css del child theme

Si usas un child theme, añade las reglas en style.css para mantener los cambios persistentes a futuras actualizaciones del tema padre.

Opción 3 — Encolar un archivo CSS desde functions.php

Ejemplo de cómo registrar y encolar un archivo CSS en WordPress (pon este código en el functions.php de tu child theme):

function mi_tema_enqueue_styles() {
  wp_enqueue_style(
    tarjetas-borde-degradado,
    get_stylesheet_directory_uri() . /css/tarjetas-borde-degradado.css,
    array(), // dependencias
    1.0
  )
}
add_action(wp_enqueue_scripts, mi_tema_enqueue_styles)

Uso dentro del editor de bloques (Gutenberg)

Puedes usar un bloque HTML personalizado o un bloque de “Group” y asignar la clase card a sus etiquetas. Si trabajas con bloques dinámicos o ACF, asegúrate de que la estructura HTML (una etiqueta contenedora con la clase card) coincida con el CSS.

Ejemplo final completo (HTML CSS) para copiar

Este bloque combina marcado simple con la técnica del pseudo-elemento para un borde degradado animado y seguro en la mayoría de navegadores:

ltarticle class=cardgt
  lth3gtTarjeta con borde degradadolt/h3gt
  ltpgtEjemplo listo para usar en una plantilla o bloque.lt/pgt
lt/articlegt

.card {
  position: relative
  border-radius: 12px
  padding: 1.25rem
  background: #fff
  box-shadow: 0 8px 24px rgba(16,24,40,0.06)
  z-index: 0
  overflow: visible
}

/ Pseudo-elemento que crea el borde degradado animado /
.card::before {
  content: 
  position: absolute
  inset: 0
  padding: 4px / grosor del borde /
  background: linear-gradient(90deg, #ff7a18, #af002d, #319197, #7b2ff7)
  border-radius: inherit
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0)
  -webkit-mask-composite: xor
  mask-composite: exclude
  z-index: -1
  transition: opacity 200ms ease
}

/ Estado hover para destacar /
.card:hover::before {
  filter: saturate(1.05) brightness(1.02)
  transform-origin: center
}

/ Accesibilidad: foco visible /
.card:focus-within {
  outline: 3px solid rgba(59,130,246,0.15)
  outline-offset: 4px
}

Conclusiones prácticas

La propiedad border-image es una herramienta potente para bordes degradados, pero si necesitas animaciones complejas o control preciso sobre capas y máscaras, la técnica del pseudo-elemento es más flexible. En WordPress puedes integrar ambos métodos tanto desde el Customizer como mediante encolado de estilos en functions.php. Siempre verifica contraste, foco y rendimiento al aplicar efectos visuales en interfaces de usuario.