Créer une bordure animée avec Tailwind CSS

La propriété border en CSS ne peut pas être animée nativement. Cependant, on peut simuler cet effet en utilisant un div avec un arrière‑plan animé et en plaçant le contenu dans un élément enfant avec du padding, qui jouera le rôle d’« épaisseur » de la bordure.

Cette méthode peut sembler complexe pour ceux qui ne travaillent pas souvent avec le CSS ou des frameworks comme Tailwind CSS, mais vous verrez que ce n’est pas si difficile et le résultat final est très satisfaisant.

Types de dégradés en CSS

Pour obtenir notre effet de bordure animée, il faut connaître les différents types de dégradés en CSS :

• Dégradé linéaire : Dégradé linéaire selon une direction donnée.
  • Documentation
• Dégradé radial : Dégradé radial depuis un point central vers l’extérieur.
  • Documentation
• Dégradé conique : Dégradé conique autour d’un point central, créant un effet « roue ».
  • Documentation

Pour notre bordure animée, nous allons utiliser le dégradé conique, car il permet de créer un effet de rotation.

Mise en place de la bordure animée

<div
  class="w-full max-w-lg bg-conic/[from_0deg] from-white to-white dark:from-black via-green-400 dark:to-black  rounded-2xl p-px"
>
  <div class="p-10 rounded-2xl bg-transparent">
    <p class="text-white text-center font-semibold ">
      Parent container background
    </p>
  </div>
</div>

---

Si nous ajoutons un arrière‑plan au conteneur enfant, nous obtenons l’effet de bordure :

<div
  class="w-full max-w-lg bg-conic/[from_0deg] from-white to-white dark:from-black via-green-400 dark:to-black rounded-2xl p-px"
>
  <!-- Conteneur parent -->
  <div class="p-10 rounded-2xl dark:dark:bg-zinc-900 bg-mint-50">
    <!-- Conteneur enfant -->
    <p class="text-white text-center font-semibold">
      En ajoutant un arrière‑plan au conteneur enfant, on obtient l’effet de bordure
    </p>
  </div>
</div>

Ajouter l’animation avec @property

Nous allons utiliser @property pour définir une propriété personnalisée qui permettra d’animer la bordure :

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

Ensuite, nous créons l’animation avec @keyframes et l’ajoutons au thème Tailwind CSS :

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

Maintenant, on l’implémente dans les classes du conteneur parent :

<div
  class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark: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">
      Animated parent container background
    </p>
  </div>
</div>

Ajuster l’épaisseur de la bordure

En modifiant le padding, on peut contrôler l’épaisseur de la bordure :

<div
  class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark:to-black animate-rotate-border rounded-2xl p-[3px]"
>
  <div class="p-10 rounded-2xl dark:bg-zinc-900 bg-zinc-50">
    <p class="text-white text-center font-semibold">
      En ajustant le padding, on peut « augmenter l’épaisseur de la bordure »
      <br />
      <code>p-[3px]</code>
    </p>
  </div>
</div>

Personnaliser le dégradé

Dans Tailwind CSS, on peut contrôler la position des couleurs du dégradé :

• from-* → Couleur de départ du dégradé.
• via-* → Couleur intermédiaire.
• to-* → Couleur finale du dégradé.

On peut aussi ajuster la position des couleurs, par exemple :

<div
  class="w-full max-w-lg bg-conic/[from_var(--border-angle)] from-white to-white dark:from-black via-green-400 dark: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">
      En ajustant la position des couleurs, on obtient un effet différent
      <br />
      <code>from-30% to-60%</code>
    </p>
  </div>
</div>

Résultat final

Je vais faire quelques petits ajustements, en changeant les couleurs de départ et de fin pour obtenir un effet plus naturel. J’utiliserai aussi 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 dark:bg-zinc-900 bg-zinc-50">
    <p class="text-white text-center font-semibold">
      Voici le résultat final
    </p>
  </div>
</div>

Conclusion

J’espère que ce guide vous a aidé à comprendre comment créer une bordure animée avec Tailwind CSS et que vous pourrez l’implémenter dans vos projets. Expérimentez avec les dégradés et les animations pour obtenir des effets uniques ! 🎨✨