Border gradient can not achieve rounded corners how to solve

Q: Can borders be tween?

Answer: Yes

.border-block {
	width: 100px;
	height: 100px;
	border: 10px solid transparent;
	border-image: linear-gradient(to top, blue, red);
	border-image-slice: 10;
}
<div class="border-block"></div>
Copy the code

Borders can be written with gradients, but rounded corners are not supported. What if you want to support rounded corners?

I used a gradient and padding for the background color

.bigbox { 
   width: 100px; 
   height: 100px; 
   box-sizing: border-box; 
   padding: 5px; 
   border-radius: 50%; 
   background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);  
   background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%); 
   background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, pink 90%);  
}
.box { 
   width:100%; 
   height:100%; 
   border-radius:50%; 
   background:#fff; 
}
<div class="bigbox">
   <div class="box"></div>
</div>
Copy the code

Ha ha I am not very clever