Add an Animated Border to Any Elementor Section (CSS Only)

Quick answer: An animated gradient border on an Elementor section is done with two nested sections and a CSS ::after pseudo-element that sits behind the content and animates its gradient position. No plugin, no JavaScript.

How it works

Elementor cannot animate a border directly, so this uses a trick: the outer section gets a gradient layer placed behind it with ::after, slightly larger than the section on every side. The inner section sits on top with a solid background, covering the middle of that gradient and leaving only the edge showing — which reads as a border. Animating the gradient’s position makes that visible edge shift colour continuously.

Set it up

Build it with two sections, one inside the other:

1. Create the outer section and give it the CSS class bpers-border. This section draws the animated border.
2. Place your real content in an inner section inside it, and give that inner section a solid background colour and your design.
3. The border thickness is set by the outer section’s padding — 2px padding gives a 2px border, 4px gives 4px.

The code

.bpers-border {
  position: relative;
  border-radius: 16px;
  background: #ffffff; /* adjust if section is dark */
  z-index: 1;
}
/* Animated Gradient Border */
.bpers-border::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(
    90deg,
    #0F1C2E,
    #F25C05,
    #CFAE70,
    #0F1C2E
  );
  border-radius: 18px;
  z-index: -1;
  background-size: 300% 300%;
  animation: bpersGradientMove 6s linear infinite;
}
/* Smooth Animation */

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

Where to add it

Appearance → Customize → Additional CSS. Both blocks go together — the first draws the gradient border, the second (@keyframes) drives the animation. Paste both.

Making it yours

• Colours: change the four hex values in the linear-gradient. The first and last should match so the loop is seamless.
• Speed: the 6s in the animation line — lower is faster.
• Corner radius: keep the outer ::after radius (18px) a couple of pixels larger than the inner radius (16px) so the corners line up.

How to verify and undo

On the front end the section’s edge should cycle through the gradient colours smoothly. If you see no border, the inner section’s background is probably transparent — give it a solid colour so it covers the middle of the gradient. To remove the effect, delete the CSS or remove the bpers-border class from the outer section.