border-radius not working with border-image output

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/

Can you please clarify your question? I have no idea what "Border-radius is deviating border-image property ?" means. — Avery, Apr 26 '15 at 10:10
http://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient — AmmarCSE, Apr 26 '15 at 10:12
I've updated my answer with a fix for your question, hope this helps! — Ed Knowles, Apr 26 '15 at 10:23

Ed Knowles · Accepted Answer · 2015-04-26T10:23:06.557

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

border-radius not working with border-image output

1 Answers1