How to Create a Gradient Border on a Circle with CSS3

How to apply linear gradient to the border of circle?

You can make the gradient circle as follows:

.rounded {  width: 100px;  height: 100px;  border: 4px solid transparent;  border-radius: 80px;  background-image: linear-gradient(white, white), linear-gradient(to right, red, orange);  background-origin: border-box;  background-clip: content-box, border-box;}

<div class="rounded"></div>

Is it possible based on CSS to create a circle with gradient border and transparent inner?

I think the best way is linear-gradient with SVG. The idea is to create a circle and fill its stroke with a gradient.

body {
  background: url(https://picsum.photos/id/1026/800/800);
}

text {
  font-size:8em
}

<svg viewBox='0 0 200 200' width=150 height=150>
  <!-- define the gradient -->
  <defs>
    <!-- x1,y1,x2,y2 are used to define the gradient direction -->
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="60%">
      <!-- start color at 0%-->
      <stop offset="0%"   stop-color="crimson"/>
      <!-- end color at 100%-->
      <stop offset="100%" stop-color="#f90"/>
    </linearGradient>
  </defs>
  <!-- Create an svg circle at [100,100] with radius of 90
       make the border-width 6 (stroke-width) fill it with gradient (stroke)
       and make the content of circle transparent (fill)
  --->
  <circle cx="100" cy="100" r="90" stroke="url(#linear)" stroke-width="6" fill="transparent" />
  <!-- Create a text element at the postion [70,140] -->
  <text x="70" y="140" fill="white">7</text>
</svg>

CSS3 circle with gradient border?

I would use a pseudo-element (:before) and style it with a gradient background.

(that is because border-image cannot be combined with border-radius)

.greenBlock { background-color: #00c200; border: 3px solid; border-top-color: #00de00; border-right-color: #006900; border-bottom-color: #006900; border-left-color: #00de00; width: 42px; height: 42px; position:relative; z-index:10;}
.greenCore { background-color: #00c200; width: 22px; height: 22px; border-radius: 50%; top:50%; left:50%; margin-left:-11px; /*half width*/ margin-top:-11px; position:relative;}.greenCore:before{ content:''; position:absolute; z-index:-1; border-radius:50%; width:28px; /*22 of greenCore + 3 + 3 for the borders*/ height:28px; left:-3px; top:-3px;     background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900)); background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%); background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%); background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%); background: linear-gradient(135deg, #00ff00 0%,#004900 100%);}

<div class="palette greenBlock" data-code="2">   <div class="greenCore"></div></div>

Possible to use border-radius together with a border-image which has a gradient?

Probably not possible, as per the W3C spec:

A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

Border Gradient with Border Radius

2021: I recommend using the CSS mask method since the support is pretty good now

---

You cannot use border-radius with gradient. Here is another idea where you can rely on multiple background and adjust the background-clip:

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
  color: #313149;
  padding: 10px;
  border: 5px solid transparent;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
}

<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>

Adding an outer gradient border or overlay shape to a circular image using CSS

I would do it like below. Two radial-gradient for the circles, a conic-gradient for the remaining coloration and a mask to create the gap:

.img-circle{
  border-radius: 50%;
} 
.border {
  padding: 2em;
  background:
   radial-gradient(farthest-side,teal 98%,#0000) 33%  97%/1em 1em,
   radial-gradient(farthest-side,gold 98%,#0000) 100% 50%/1em 1em,
   conic-gradient(from -160deg, teal 120deg, blue 0 210deg,gold 0 250deg,#0000 0);
  background-repeat:no-repeat;
  -webkit-mask:
    radial-gradient(farthest-side, 
     #000  calc(99%  - 2em),
     #0000 calc(100% - 2em) calc(99% - 1em), 
     #000  calc(100% - 1em))
}

body {
  background:#ccc;
}

<img src="https://placeimg.com/280/280/any" class="border img-circle">

Pure CSS gradient circle border

SVG is the recommended way to create a circle shape and draw gradient outline / border around it.

SVG has a circle element that can be used to draw a circle shape. This shape can be filled and outlined with a solid color, gradient or pattern.

* {box-sizing: border-box;}
body {  background: linear-gradient(#333, #999);  text-align: center;  min-height: 100vh;  padding-top: 10px;  margin: 0;}svg {vertical-align: top;}

<svg width="210" height="210">  <defs>    <linearGradient id="grad1" x1="0" y1="1" x2="1" y2="0">      <stop offset="0" stop-color="#f5d700" />      <stop offset="1" stop-color="#0065da" />    </linearGradient>    <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="0" x2="0" y2="1"></linearGradient>  </defs>  <g fill="none">    <circle cx="100" cy="100" r="95" stroke="url(#grad1)" stroke-width="2" />    <circle cx="100" cy="100" r="40" stroke="url(#grad2)" stroke-width="5" />  </g></svg>

---

Related Topics