Crear un borde animado con Tailwind CSS

La propiedad border en CSS no puede ser animada de forma nativa. Sin embargo, podemos simular este efecto utilizando un div con un fondo animado y colocando el contenido dentro de un elemento hijo con padding, que actuará como el “grosor” del borde.

Este método puede parecer complejo para quienes no trabajan frecuentemente con CSS o frameworks como Tailwind CSS, pero verás que no es tan difícil y que el resultado final es bastante satisfactorio.

Tipos de gradientes en CSS

Para lograr nuestro efecto de borde animado, debemos conocer los diferentes tipos de gradientes en CSS:

• Linear Gradient: Degradado lineal a lo largo de una dirección específica.
  • Documentación
• Radial Gradient: Degradado radial desde un punto central hacia afuera.
  • Documentación
• Conic Gradient: Degradado cónico alrededor de un punto central, creando un efecto de “rueda”.
  • Documentación

Para nuestro borde animado, utilizaremos conic gradient, ya que permite crear un efecto de giro.

Implementación del borde animado

<div
  class="w-full max-w-lg bg-conic/[from_0deg] from-black via-green-400 to-black  rounded-2xl p-px"
>
  <div class="p-10 rounded-2xl bg-transparent">
    <p class="text-white text-center font-semibold ">
      Fondo del contenedor padre
    </p>
  </div>
</div>

---

Si agregamos un fondo al contenedor hijo, logramos el efecto de borde:

<div
  class="w-full max-w-lg bg-conic/[from_0deg] from-black via-green-400 to-black rounded-2xl p-px"
>
  <!-- Contenedor padre -->
  <div class="p-10 rounded-2xl bg-zinc-900">
    <!-- Contenedor hijo -->
    <p class="text-white text-center font-semibold">
      Al colocar un fondo al contenedor hijo, logramos el efecto del borde
    </p>
  </div>
</div>

Agregando animación con @property

Utilizaremos @property para definir una propiedad personalizada que nos permitirá animar el borde:

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

Luego, creamos la animación con @keyframes y la añadimos al tema de Tailwind CSS:

@theme {
  --animate-rotate-border: border-rotate 3s linear infinite;
  @keyframes border-rotate {
    to {
      --border-angle: 360deg;
    }
  }
}

Ahora lo implementaremos en las clases de nuestro contenedor padre

<div
  class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-black via-green-400 to-black animate-rotate-border rounded-2xl p-px"
>
  <div class="p-10 rounded-2xl bg-transparent">
    <p class="text-white text-center font-semibold">
      Fondo del contenedor padre animado
    </p>
  </div>
</div>

Ajustando el grosor del borde

Modificando el padding, podemos controlar el grosor del borde:

<div
  class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-black via-green-400 to-black animate-rotate-border rounded-2xl p-[3px]"
>
  <div class="p-10 rounded-2xl bg-zinc-900">
    <p class="text-white text-center font-semibold">
      Ajustando el padding podemos "aumentar el grosor del borde"
      <br />
      <code>p-[3px]</code>
    </p>
  </div>
</div>

Personalización del degradado

En Tailwind CSS, podemos controlar la posición de los colores del degradado:

• from-* → Color de inicio del degradado.
• via-* → Color intermedio.
• to-* → Color final del degradado.

También podemos ajustar las posiciones de los colores, por ejemplo:

<div
  class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-black via-green-400 to-black from-30% to-60% animate-rotate-border rounded-2xl p-px"
>
  <div class="p-10 rounded-2xl bg-transparent">
    <p class="text-white text-center font-semibold">
      Ajustando las posiciones de los colores logramos un efecto diferente
      <br />
      <code>from-30% to-60%</code>
    </p>
  </div>
</div>

Resultado final

Haré algunos pequeños ajustes, cambiando los colores de from y to para lograr un efecto más natural. Además, usaré un padding de 1px.

<div
  class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-green-200/20 via-green-400 to-green-200/20 from-30% to-60% animate-rotate-border rounded-2xl p-px"
>
  <div class="p-10 rounded-2xl bg-zinc-900">
    <p class="text-white text-center font-semibold">
      Este es el resultado final
    </p>
  </div>
</div>

Conclusión

Espero que esta guía te haya ayudado a entender cómo crear un borde animado con Tailwind CSS y que puedas implementarlo en tus proyectos. ¡Experimenta con los gradientes y animaciones para obtener efectos únicos! 🎨✨