Getting div border gradient to work on circular div

Question

I'm trying to get a div that has a circular border to have a gradient. The div is also hollow on the inside to have text in.

What I want (Designer Mock)

I've tried using the border-image method when doing this however it turns my circular div into a square! (What I have in html/css)

I've been looking at other methods but they dont seem to be returning the results I want :/

.score-circle {
  border: 5px solid transparent;
  border-radius: 50%;
  display: inline-block;
  width: 60px;
  height: 60px;
  z-index: 86;
  text-align: center;
  -moz-border-image: -moz-linear-gradient(top, #34EA7E 0%, teal 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #34EA7E 0%, teal 100%);
  border-image: linear-gradient(to bottom, #34EA7E 0%, teal 100%);
  border-image-slice: 1;
}

.score-circle .score-number {
  font-size: 1.3em;
  color: #ffffff;
  margin-bottom: 0;
}

.score-circle .score-text {
  font-size: 0.6em;
  color: #ffffff;
}

<div class='score-circle'>
  <p class='score-number'>
    5
  </p>
  <p class='score-text'>
    SCORE
  </p>
</div>

Delowar Hosain · Accepted Answer · 2018-02-26T05:05:53.710

You can use SVG for this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="200" height="200" preserveAspectRatio="none">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" style="stop-color:#ff0000" />
      <stop offset="0.5" style="stop-color:#288feb" />
      <stop offset="1" style="stop-color:#83eb8a" />
    </linearGradient>
  </defs>
  <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
</svg>

div {
  width: 250px;
  height: 250px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" preserveAspectRatio="none"><defs><linearGradient id="gradient"><stop offset="0" style="stop-color:#0070d8" /><stop offset="0.5" style="stop-color:#2cdbf1" /><stop offset="1" style="stop-color:#83eb8a" /></linearGradient></defs><ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /></svg>');
}

<div></div>

Also, you can make it using CSS, it does not require extra markup but uses an ::after pseudo-element.

@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');
html {
    /* just for showing that background doesn't need to be solid */
    background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
    padding: 10px;
}

.grounded-radiants {
    position: relative;
    border: 4px solid transparent;
    border-radius: 50%;
    background-clip: padding-box;
    height: 100px;
    width: 100px;
    background: #fff;
}

.grounded-radiants::after {
    position: absolute;
    top: -10px; bottom: -10px;
    left: -10px; right: -10px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 50%;
}

<div class="grounded-radiants"></div>

Wow that works great!!! I should look into svg's more they look very interesting! — cosmichero2025, Feb 26 '18 at 05:01

score 1 · Answer 2 · answered Feb 26 '18 at 04:38

You can use a pseudo element to cover the center of the circle - it will need to have the same background color as the background of the area outside the circle. here's an example: https://codepen.io/anon/pen/EQdNMw

Same HTML as yours, with the CSS updated to this:

body {
  background:#444;
}
.score-circle {
  border-radius: 50%;
  display: block;
  width: 80px;
  height: 80px;
  z-index: 86;
  text-align: center;
  background: -moz-linear-gradient(top, #34EA7E 0%, teal 100%);
  background: linear-gradient(to bottom, #34EA7E -10%, teal 100%);
  position:relative;
}
.score-circle:before {
  position:absolute;
  content:" ";
  background:#444444;
  width:80%;
  height:80%;
  border-radius:50%;
  top:10%;
  left:10%;
  z-index:-1;
}
.score-circle .score-number {
  font-size: 1.3em;
  color: #ffffff;
  top:calc(50% - 1.3rem);
  position:relative;

}
.score-circle .score-text {
  font-size: 0.6em;
  color: #ffffff;
  top:calc(50% + .6rem);
}

Bonus: there's a sneaky way to position your text vertically using top and calc if you don't want to bust out flexbox to align the inside text

Hey man thanks for the tips! One questions though the circle has to be transparent in the background because the background color changes how would you go about doing it? If I make the background transparent it gets rid of the effect like here https://codepen.io/anon/pen/oEaBXP I was wondering if there was a good way of dealing with this? — cosmichero2025, Feb 26 '18 at 04:53
So in short I want the background of the circle to be transparent to adapt — cosmichero2025, Feb 26 '18 at 04:53
Your answer was great dude but the other guy with the svg way was fantastic! — cosmichero2025, Feb 26 '18 at 05:02

Kunj · Answer 3 · 2018-02-26T04:29:04.830

One way to achieve it by adding a div .score-circle-inner inside the score-circle:

CSS:

.score-circle {
      border: 0px solid transparent;
      border-radius: 50%;
      display: inline-block;
      width: 60px;
      height: 60px;
      z-index: 86;
      text-align: center;
      -moz-background-image: -moz-linear-gradient(top, #34EA7E 0%, teal 100%);
      -webkit-background-image: -webkit-linear-gradient(top, #34EA7E 0%, teal 100%);
      background-image: linear-gradient(to bottom, #34EA7E 0%, teal 100%);
      background-image-slice: 1;
      padding: 5px;
}

.score-circle-inner {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #2D3138;
    position: relative;
    border-radius: 50%;
}

HTML:

<div class='score-circle'>
    <div class="score-circle-inner">
        <p class='score-number'>
            5
        </p>
        <p class='score-text'>
            SCORE
        </p>
    </div>
</div>

I'm trying to get it to work but its just returning a circle with a gradient background instead of a hollow circle with a gradient border I'm going to try to play around with it more — cosmichero2025, Feb 26 '18 at 04:30
Good luck @cosmichero2025 Its a quick way shared to achieve it. — Kunj, Feb 26 '18 at 04:44

Getting div border gradient to work on circular div

3 Answers3