<div class="border-gradient"></div>

<style>
  @property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes rotate-gradient {
    to {
      --gradient-angle: 360deg;
    }
  }

  .border-gradient {
    --c: #171717;
    --p: 8%;
    background:
			/* You can't set a background-origin with a solid color, so we use a linear gradient where both stops are the same color to fake it */
      linear-gradient(var(--c), var(--c)) padding-box,
      conic-gradient(
          from var(--gradient-angle),
          transparent,
          white var(--p),
          transparent calc(var(--p) * 2)
        )
        border-box;
    border: 1px solid transparent;
    animation: rotate-gradient 2s linear infinite;
  }

  /* -------- */

  div {
    width: max(25vmin, 8rem);
    aspect-ratio: 1;
    border-radius: 1rem;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
  }

  body {
    display: grid;
    place-items: center;
    background: #0a0a0a;
  }
</style>