<input type="checkbox" />
<div></div>

@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;
	}
}