How to Create Animated Borders in Elementor (No Extra Plugins Needed!)

Looking to spice up your Elementor design with animated borders? You’re in the right place! In this quick tutorial, we’ll show you how to add smooth, eye-catching CSS border animations to any Elementor section, column, or widget — without installing any third-party plugin.

✅ Why Use Animated Borders?

Animated borders:

• Improve visual appeal and user engagement
• Help highlight call-to-action sections or important content
• Add a modern, dynamic feel to your site

---

🧩 Step 1: Open Your Page with Elementor

Go to the page where you want to add the animation. Click “Edit with Elementor”.

---

🖌️ Step 2: Add a Section or Widget

You can apply the effect to:

• A button
• An image box
• A heading
• Or even a whole column or section

Select the widget, then go to the “Advanced” tab.

---

🧑‍💻 Step 3: Add a Custom CSS Class

Under the “Advanced” tab → CSS Classes → Type:
“`css
animated-border

---

💡 Step 4: Add Custom CSS Code (Pro Users Only)

Go to the “Custom CSS” section (only available in Elementor Pro) and paste this:

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

.animated-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, #2D6FF7, #1B1F3B, #2D6FF7);
  animation: borderAnim 2s linear infinite;
  z-index: -1;
}

@keyframes borderAnim {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

💡 Tip: You can customize the color, direction, and speed of the animation as needed.

Custom CSS V2

    :root{
        --first-color: #ef32d9;
        --second-color: #89fffd;
        --size: 100px;
        --speed: 4s;
    }
    selector{
        overflow: hidden !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    selector:before{
        content: '';
        position: absolute;
        width: var(--size);
        height: 140%;
        background: linear-gradient(var(--first-color), var(--second-color));
        animation: animate var(--speed) linear infinite;
    }
    @keyframes animate{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

🚫 What If I Don’t Have Elementor Pro?

You can still achieve this using:

• Custom CSS plugin (e.g., “Simple Custom CSS”)
• Add the same class and paste the CSS globally in Appearance → Customize → Additional CSS

---

🎨 Example Use Cases

• Highlight Call-to-Action buttons
• Animated borders around pricing tables
• Add visual interest to blog post thumbnails
• Give a premium touch to hero sections

---

🔚 Final Thoughts

With just a few lines of CSS, you can instantly enhance the visual dynamics of your Elementor site. This trick is lightweight, doesn’t require any additional plugin, and works perfectly across modern browsers.

Let your creativity flow — customize the animation direction, colors, and speed to match your brand!

---

💬 Got Questions?

Drop your questions below or join our community at EncodeMore.com for more tips and tricks like this.

---