如何在边框样式中添加衬垫渐变？

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

Answer 1

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;
  ...
}