Cómo crear un borde degradado en CSS (y aplicarlo en Elementor)

¿Cómo crear un borde degradado en CSS?

Si buscas un toque moderno, elegante y con estilo para tus cajas, este truco de CSS te va a encantar.

Usando background-clip junto a múltiples capas de background-image, puedes lograr un borde con degradado multicolor sin usar pseudo-elementos ni complicarte con extra HTML.

Te muestro el ejemplo completo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo borde degradado</title>
  <style>
    .borde {
        border: 4px double transparent;
        border-radius: 30px;
        background-image: 
            linear-gradient(#ffffff, #ffffff), 
            linear-gradient(113deg, #8360C3 0%, #6079C3 40%, #2EBF91 100%) !important;
        background-origin: border-box;
        background-clip: padding-box, border-box;
        
    }

    div {
        height: 600px;
        width: 300px;
        padding: 40px;
        font-family: sans-serif;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    p {
        font-family: "NERIS", Sans-serif;
        color: #271D3B;
    }
  </style>
</head>
<body>

  <div class="borde">
    <p>Este es un borde degradado usando <b> background-clip</b></p>.
  </div>

</body>
</html>

¿Cómo funciona este borde degradado?

Se crea un borde de 4px double transparent para dejar espacio al degradado (4px se refiere al ancho).

Se usan dos capas de fondo:

La primera (linear-gradient(#ffffff, #ffffff)) rellena el interior de la caja en blanco.
La segunda (linear-gradient(113deg, #8360C3, #6079C3, #2EBF91)) se muestra solo en el borde.

background-origin: border-box permite que el fondo alcance el borde.

background-clip: padding-box, border-box recorta cada fondo: el primero al área de contenido y el segundo al borde.

Nota importante si usas Elementor:

Elementor no permite crear bordes degradados desde su panel de diseño. Aunque puedes aplicar un fondo con degradado, no puedes asignarlo directamente al borde.

Para conseguir este efecto visual, es imprescindible usar CSS personalizado y aplicar background-clip y background-origin.

Solo así lograrás este tipo de borde elegante, multicolor y moderno que ves en el ejemplo.

Además, con este truco puedes tener un borde multicolor sin necesidad de pseudo-elementos (::before o ::after) y que funciona perfectamente en cualquier sección o widget.

Cómo aplicarlo en Elementor (paso a paso):

1. Añade este CSS en tu tema hijo (style.css) o en Apariencia → Personalizar → CSS adicional:

.borde {
     border: 4px double transparent;
     border-radius: 30px;
     background-image: 
         linear-gradient(#ffffff, #ffffff), 
         linear-gradient(113deg, #8360C3 0%, #6079C3 40%, #2EBF91 100%) !important;
     background-origin: border-box;
     background-clip: padding-box, border-box;
 }

2. En Elementor: