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

i'm creating css3 loading icon effect instead of using gif. have created loading icon effect i'm unable make circle. revolving in square instead of circle. border-radius not working 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/

this won't work border-image. radius being applied object border-image gradient not respected.

based on what, i've created fiddle here https://jsfiddle.net/a9dpg582/1/ think 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);     } }