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

  .gradient-border-top-thin{
    --angle: 0deg;  
    border-top: 0.5vmin solid;
    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;  
    animation: 10s rotate linear infinite;
    }	
	
.gradient-border-left{
	--angle: 0deg;  
	border-left: 0.5vmin solid;
	border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;  
	animation: 10s rotate linear infinite;
	}
	
.gradient-border-right{
	--angle: 0deg;  
	border-right: 0.5vmin solid;
	border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;  
	animation: 10s rotate linear infinite;
	}

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

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

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