How to Add an Animated Border to an Elementor Container

Animated borders are a subtle but powerful way to make sections stand out—without adding heavy images or JavaScript. If you’re using Elementor, you can create a smooth, modern animated border using pure CSS and the ::before pseudo-element.

In this post, I’ll show you exactly how to do it, step by step.

Step 1: Add a CSS Class to Your Elementor Container

1. Click the container you want to style
2. Go to Advanced → CSS Classes
3. Add this class:

animated-border

animated-border

This class will be used to target the container with CSS.

Step 2: Add the CSS Code

Paste the following CSS into:

• Select Container→ Advanced sitting→ Custom CSS.

.animated-border {
  position: relative;
  overflow: hidden;
}

.animated-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* Border thickness */
  border-radius: 16px; /* Match your container radius */
  background: linear-gradient(
    90deg,
    #6366F1,
    #0BC514,
    #6366F1
  );
  background-size: 300% 300%;
  animation: borderMove 4s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

@keyframes borderMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

.animated-border {
  position: relative;
  overflow: hidden;
}

.animated-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* Border thickness */
  border-radius: 16px; /* Match your container radius */
  background: linear-gradient(
    90deg,
    #6366F1,
    #0BC514,
    #6366F1
  );
  background-size: 300% 300%;
  animation: borderMove 4s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

@keyframes borderMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

Step 3: Match Elementor Settings

For the best result, make sure:

• The container has a background color (even transparent works)
• Border radius in Elementor matches the CSS value
• Overflow is not set to “Visible”

This ensures the border stays clean and aligned.

Customization Options

Change Border Thickness

padding: 3px;

padding: 3px;

Slow Down the Animation

animation: borderMove 8s linear infinite;

animation: borderMove 8s linear infinite;

Show Border Only on Hover

.animated-border::before {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.animated-border:hover::before {
  opacity: 1;
}

.animated-border::before {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.animated-border:hover::before {
  opacity: 1;
}

Add a Soft Glow Effect

filter: blur(0.6px);

filter: blur(0.6px);

Where This Works Best

• Call-to-action sections
• Pricing cards
• Feature highlights
• Hero boxes
• Special offers

It adds motion without distracting the user—clean and professional.

Final Thoughts

Using ::before for animated borders in Elementor is a smart, modern approach. It keeps your site fast, avoids extra plugins, and gives you full design control with just a few lines of CSS.