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

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

div {
  --angle: 0deg;
  width: 50vmin;
  height: 50vmin;
  border: 10vmin solid;
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  
  animation: 10s rotate linear infinite;
}


















@layer debug {
  input[type="checkbox"] {
    position: fixed;
    top: 1em;
    left: 1em;
  }

  input[type="checkbox"]:after {
    content: 'Toggle Fill';
    white-space: nowrap;
    padding-left: 1.5em;
  }

  input[type="checkbox"]:checked + div {
    border-image-slice: 1 fill;
  }
}

@layer layout {
  html {
    background: #fff;
  }

  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
  }

  footer {
    text-align: center;
    font-style: italic;
  }
}