How to add liner gradient into border style?

Question

Here I have a circular badge. Below is the code for it

.center-badge {
  background: #09a49c;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 10px solid #f2f2f2;
  position: absolute;
  top: -50px;
  left: -30px;
  line-height: 16px;
}

.center-badge p {
  font-size: 12px;
  color: var(--white);
  margin-bottom: 0px;
}

.center-badge p strong {
  display: block;
  font-size: 16px;
}

<div class="center-badge">
  <div>
    <p>Taux </p>
    <p>codemandeur</p>
  </div>
</div>

Now I have been asked to add border color as a linear-gradient(#fbfbfb, #c5d4dd). But this works only on a background image. I have added something like this, but it overrides my whole body color. Please help me how to fix this

.center-badge {
    background: #09a49c;
    height: 120px;
    width: 120px;
    border-radius:50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -50px;
    left: -30px;
    line-height: 16px;
    border: 10px solid transparent;
    background-image: linear-gradient(#fbfbfb, #c5d4dd);
    background-origin: border-box;
    background-repeat: no-repeat;  
}

I believe the repetitive background is the problem. How to apply this linear gradient as a border

score 1 · Accepted Answer · answered Dec 10 '21 at 06:55

I used this on my project. It will work.

.center-badge {
  ...
  background-image: linear-gradient(#09a49c , #09a49c),
                    linear-gradient(to right, #fbfbfb, #c5d4dd);
  background-origin: border-box;
  border: double 0.2em transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  ...
}

How to add liner gradient into border style?

1 Answers1