border-radius not working with border-image output - html

Question

I'm creating a CSS3 loading icon effect instead of using GIF. I have created the loading icon effect but I'm unable to make it circle. It is revolving in square instead of circle. Border-radius not working with border-image property ?
HTML
<div id="progress">
<span class="spinner-icon"></span>
</div>
CSS
#progress {
pointer-events: none;
}
#progress .spinner-icon {
width: 30px;
height: 30px;
display:block;
border: solid 2px transparent;
border-radius:50%;
-webkit-animation: progress-spinner 600ms linear infinite;
animation: progress-spinner 600ms linear infinite;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
#progress {
position: absolute;
}
#-webkit-keyframes progress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes progress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
http://jsfiddle.net/44athund/3/

Answer 1

This won't work with border-image. The radius is being applied to the object however the border-image with a gradient will not be respected.
Based on what you what, I've created a fiddle here https://jsfiddle.net/a9dpg582/1/ I think this is what you're after.
#progress {
pointer-events: none;
position: relative;
}
#progress .spinner-icon::after {
content: '';
border-radius: 50%;
background-color: #FFF;
width: 26px;
height: 26px;
position: absolute;
left: 2px;
top: 2px;
}
#progress .spinner-icon {
width: 30px;
height: 30px;
display: block;
background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-radius: 50%;
-webkit-animation: progress-spinner 600ms linear infinite;
animation: progress-spinner 600ms linear infinite;
}
#progress {
position: absolute;
border-radius: 50%;
}
#-webkit-keyframes progress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes progress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}