How to add gradient to border that contains border radius and has a transparent background?

Question

I am not sure if the questions has been yet properly asked, but I am looking for a legit answer to this problem.

I am trying to achieve the following.

Create div with a border
Give div a radius (make circle)
Give border a gradient
Keep background of div transparent

I have found examples that would allow me to create a gradient border, but in most cases the background of the div was not transparent but had a color matching the body background. example

One way that I found to add a border to your div is shown below, though this does not allow you to use border-radius and therefor keeps your div as a square, although allowing your background to be transparent, it does not allow your shape to be a circle.

border-image:linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
border-image-slice:1;

I have also tried to use clip-path circle, but have not found anything that works.

One last solution that struck me was to use font, I have looked for the roundest "o" in google fonts and found the font family "Josefin Sans". Used the "o" as my circle, but doing such leaves me in a bind with the width of the border. the following code below was used to achieve a gradient clip on my text.

 background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

see codepen example.

I am considering to create svg.. but if anyone has came across a solution for this please let me know.

Thank you.

I recommend you use a SVG than rely on a letter...as the letter trick is too much of a hack, IMHO. — Ason
Here is one stackoverflow.com/questions/5737975/… ...and here is another stackoverflow.com/questions/30147879/… — Ason
@LGSon seems that using an svg would be the best way to go from what you are offering.. I am just curious how come border radius does not border-image and border-image-slice? — Digggid

Temani Afif Temani Afif · Accepted Answer · 2018-07-14T21:23:17

Here is an SVG solution:

body {
 background-color:#080808;
 animation:changebg 30s infinite;
 overflow:hidden;
}

@keyframes changebg {
 0%{background-color:#23966c;}
 20%{background-color:#faaa54;}
 40%{background-color:#e23b4a;}
 60%{background-color:#db0768;}
 80%{background-color:#360670;}
 100%{background-color:#23966c;}
}

<svg width="300" height="300">
  <defs>
    <!-- define gradient -->
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="50%" stop-color="purple" />   
      <stop offset="100%" stop-color="yellow" />
    </linearGradient>
  </defs>
  <circle r="100" cx="150" cy="150" fill="transparent" stroke="url(#grad)" stroke-width="10" />
</svg>

By the way here is another idea using CSS but of course without transparency:

body {
  background-color: pink;
  overflow: hidden;
}

.cir {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border-radius: 50%;
  border: 20px solid transparent;
  background: 
  linear-gradient(pink, pink) padding-box, 
  linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670) border-box;
}

<div class="cir"></div>

How to add gradient to border that contains border radius and has a transparent background?

1 Answers