Animate any section border in elementor or anywhere.

To apply an animated border to any section, you need to use two sections (wrapper + inner section).

Step-by-Step:

Create the Main (Outer) Section

Add this CSS class:

bpers-border

This section will handle the animated border.

Add Inner Section Inside It

Place your actual content inside this section.

Apply your desired background color and design here.

Control Border Thickness

The border size depends on the padding of the outer section

Example:

padding: 2px â†’ creates a 2px border

padding: 4px â†’ creates a 4px border

CSS 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%; }
}