by

Examples by Greenshift: https://greenlightdemo.instawp.xyz/ & https://greenshift.wpsoul.net/who-we-are-section-greenlight/. Alternative tutorial: https://ibelick.com/blog/create-animated-gradient-borders-with-css

Implementation: A (multi-)colored element rotating conically via CSS is added inside a container, which is visible only along the container’s border.

Container

BLOCK EDITOR:

Define padding, border & border-radius of container.
Set border colour to transparent or semi transparent.
Add any content inside the container.
CODE SNIPPET or HOOK ELEMENT (Customizer CSS won’t work due to restrictions!) 
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* The beam-bg value = container-background-colour */

.border-beam {
  --border-angle: 0turn;
  --beam-bg: var(--accent-yellow);

/* The following variable values represent the fixed colors, while the values at 40% and 60% respectively correspond to the color values of the tail. */

  background:
    linear-gradient(var(--beam-bg), var(--beam-bg)) padding-box,
    conic-gradient(
      from var(--border-angle),
      var(--accent-green) 0%,
      var(--accent-green) 20%,
      #ff0000 40%,
      #ffcc00 60%,
      var(--accent-green) 80%,
      var(--accent-green) 100%
    ) border-box;

  animation: border-beam-spin 3s linear infinite;
}

/* This is to stop the animation on hover */

.border-beam:hover {
  animation-play-state: paused;
}

@keyframes border-beam-spin {
  to {
    --border-angle: 1turn;
  }
}

Container

Container Title

Container Content