Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to create a gradient border on a CIRCLE with css3? [duplicate]

I have an background image in shape of a circle. Have given it 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 none applied to circles. Here's 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!!

like image 442
L N Avatar asked Jul 13 '15 16:07

L N


People also ask

How do you make a repeating gradient in CSS?

repeating-linear-gradient() The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

Can CSS border have gradient?

Gradient borders are not directly supported by using CSS.

Is it possible to combine a background image and CSS3 gradients?

You can combine a background-image and CSS3 gradient on the same element by using several backgrounds. In our example below, we set the height and width of our <div> and add a background. Then, we set the background image fallback using the “url” value of the background-image property.

Which of the following are types of gradients in CSS3?

You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function).


2 Answers

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>
like image 170
hmak.me Avatar answered Oct 13 '22 21:10

hmak.me


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 that's what you're looking for, but you can just set the background to the gradient, and then position an element over the top (here I'm using the 'after' pseudo selector)

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

like image 40
Hiram Hibbard Avatar answered Oct 13 '22 22:10

Hiram Hibbard