Is it possible to create a gradient border on CIRCLE using css3?

Question

I have a circle shaped background image. Gave him a yellow border. I would like to change the border to a gradient from yellow to white. I have seen many examples with square borders, but not one has been applied to circles. Here is my code:

.Profileimage{ background-image: url("images/profilePic.jpg"); background-repeat: no-repeat; background-size: cover; overflow:hidden; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50%; width:100px; height:100px; border: 5px solid rgb(252,238,33); } 

 <div class="Profileimage"></div> 

Thanks!!

Answer 1

This is your answer:

 #cont{ background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%); width: 300px; height: 300px; border-radius: 1000px; padding: 10px; } #box{ background: black; width: 300px; height: 300px; border-radius: 1000px; } 

 <div id="cont"> <div id="box"></div> </div> 

Answer 2

Maybe something like this?

 .Profileimage{ position: relative; background: linear-gradient(rgb(252,238,33), rgb(255,255,255)); -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50%; width:100px; height:100px; } .Profileimage:after{ position: absolute; display: block; top: 5px; left: 5px; width: 90px; height: 90px; content: ""; background-color: #fff; background-image: url("images/profilePic.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 50%; overflow: hidden; } 

Not sure if this is what you are looking for, but you can just set the background to the gradient and then put the element on top (here I use the “after” pseudo-selector)

Fiddle: http://jsfiddle.net/6ue88pu6/1/

Answer 3

I see that this question is already old, but I had the same problem, and I could fix it. The trick is to wrap your div in another div.

 .gradient-wrapper { padding: 10px; border-radius: 50%; display: inline-block; background: yellow; // As fallback for browsers which do not support gradient background: -webkit-linear-gradient(yellow, white); background: -o-linear-gradient(yellow, white); background: -moz-linear-gradient(yellow, white); background: linear-gradient(yellow, white); } #maincircle { width: 100px; height: 100px; background: #424242; border-radius: 50%; } 

 <div class="gradient-wrapper"> <div id="maincircle"> &nbsp; </div> </div> 

Result:

Hope this helps!