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

.stripe-border {
  position: relative;
  border-radius: 12px;
}

.stripe-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;

  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    transparent 270deg,
    white 300deg,
    transparent 330deg
  );

  animation: stripeBorderSpin 3s linear infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

@keyframes stripeBorderSpin {
  to {
    --border-angle: 360deg;
  }
}