---
title: Animated Border Trail
description: A container with animated border trail, this can be used for buttons as well as cards.
author: harimanok_
---

<ComponentPreview name="container-animated-border-trail--docs" />

## Installation

<Steps>
<Step>Add this CSS for `angle` property</Step>

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

<Step>Update `tailwind.config.js`</Step>

Add the following to your tailwind.config.js file.

```json
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "trail": {
          "0%": { "--angle": "0deg" },
          "100%": { "--angle": "360deg" },
        },
      },
      animation: {
        "trail": "trail var(--duration) linear infinite",
      },
    }
  }
}
```

<Step>Run the following command</Step>

It will create a new file `animated-border-trail.tsx` inside the `components/animata/container` directory.

```bash
mkdir -p components/animata/container && touch components/animata/container/animated-border-trail.tsx
```

<Step>Paste the code</Step>{" "}

Open the newly created file and paste the following code:

```jsx file=<rootDir>/animata/container/animated-border-trail.tsx

```

</Steps>

## Credits

Built by [hari](https://github.com/hari)

@jh3yy on [Twitter](https://x.com/jh3yy/status/1814041895011533056)

I tried using his method but the transition in the border looked weird in my case so, I created this version.

<Callout className="mt-3">
  This can also be created using `clip-path` but I like this method better.
</Callout>
