--- layout: /src/layouts/MarkdownPostLayout.astro title: Create an Animated Border with Tailwind CSS author: Fernando López description: "Add a dynamic touch to your designs with an animated border in Tailwind CSS. Learn how to use conic-gradient and animations to achieve an impressive visual effect. 🚀✨" image: url: "/images/posts/animated-borders-tailwind.webp" alt: "Example of animated borders with Tailwind CSS in a dark design, featuring a vibrant color gradient background." pubDate: 2025-03-27 tags: [ "CSS", "Tailwind", "Animation", "Frontend", "UI" ] languages: ["tailwind", "html", ] --- The `border` property in CSS cannot be animated natively. However, we can simulate this effect by using a `div` with an animated background and placing the content inside a child element with `padding`, which will act as the "thickness" of the border. This method might seem complex for those who don't frequently work with CSS or frameworks like Tailwind CSS, but you'll see that it's not that difficult and the final result is quite satisfying. ## Types of Gradients in CSS To achieve our animated border effect, we need to know the different types of gradients in CSS: - **Linear Gradient:** Linear gradient along a specific direction. - [Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) - **Radial Gradient:** Radial gradient from a central point outward. - [Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) - **Conic Gradient:** Conic gradient around a central point, creating a "wheel" effect. - [Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient) For our animated border, we'll use **conic gradient**, as it allows us to create a spinning effect. ## Implementing the Animated Border ```html

Parent container background

```

Parent container background



If we add a background to the child container, we achieve the border effect: ```html

By adding a background to the child container, we achieve the border effect

```

By adding a background to the child container, we achieve the border effect

## Adding Animation with `@property` We'll use `@property` to define a custom property that will allow us to animate the border: ```css @property --border-angle { syntax: ""; inherits: false; initial-value: 0deg; } ``` Then, we create the animation with `@keyframes` and add it to the Tailwind CSS theme: ```css @theme { --animate-rotate-border: border-rotate 3s linear infinite; @keyframes border-rotate { to { --border-angle: 360deg; } } } ``` Now we'll implement it in our parent container classes: ```html

Animated parent container background

```

Animated parent container background


This is how it looks with a background in our content

## Adjusting the Border Thickness By modifying the `padding`, we can control the border thickness: ```html

By adjusting the padding we can "increase the border thickness"
p-[3px]

```

By adjusting the padding we can "increase the border thickness"
p-[3px]

## Customizing the Gradient In Tailwind CSS, we can control the position of the gradient colors: - `from-*` → Starting color of the gradient. - `via-*` → Intermediate color. - `to-*` → Final color of the gradient. We can also adjust the color positions, for example: ```html

By adjusting the color positions we achieve a different effect
from-30% to-60%

```

By adjusting the color positions we achieve a different effect
from-30% to-60%

## Final Result I'll make some small adjustments, changing the from and to colors to achieve a more natural effect. Also, I'll use a 1px padding. ```html

This is the final result

```

This is the final result

## Conclusion I hope this guide has helped you understand how to create an animated border with Tailwind CSS and that you can implement it in your projects. Experiment with gradients and animations to get unique effects! 🎨✨