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

css linear-gradients
L N picture L N · Jul 13, 2015 · Viewed 21.1k times · Source

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:

Thanks!!

Answer

hmak.me picture hmak.me · Jul 13, 2015

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>

Related questions

Gradient text color

Is there a generator , or an easy way to generate text like this but without having to define every letter So something like this: But not with rainbow colors but generate with other colors (for example white to grey/light …

Read More
SVG gradient using CSS

I'm trying to get a gradient applied to an SVG rect element. Currently, I'm using the fill attribute. In my CSS file: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } And the rect element has the correct fill color …

Read More
CSS3 Box-Shadow Linear Gradient?

Is there a way in CSS3 to create a cross-browser (i.e.: Mozilla, Webkit, and Opera) inset box shadow that will transition from black on top to white on the bottom? The closest way that I have found to do …

Read More