Border radius not working when border-image-syle used

Question

now i was doing a project. for fun with my friends wanted to do a circle where it rotates in the Z axis but i needed a gradient so did some research how to put a gradient on a border found this did it but my border radius went missing what do you guys recommend?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Nov 05 '22 at 06:44

score -1 · Answer 1 · answered Nov 05 '22 at 06:45

.circle {
  background-image:linear-gradient(red,green);
  padding:10px;
  width:300px;
  height:300px;
  border-style: solid;
  border-color:transparent;
   border-radius: 50%;
  border-width:1px;
  padding:1px;
}
.circle > div {
  background:lightyellow;
  height: 299px;
  width: 299px;
  border-style: solid;
  border-color:transparent;
   border-radius: 50%;
  border-width:1px;  
}

<div class="circle">
  <div></div>
  
</div>

score -1 · Accepted Answer · answered Nov 05 '22 at 06:56

Take a look at this thread here: Is it possible to create a gradient border on a CIRCLE with css3?

Because you cannot use that with the border property, you have to add the linear gradient to the background. Then you must add a new element inside the circle to "cut out" the inner circle (and just leave a "border" showing"

Here is and example:

.circle {
  --circle-size: 200px;
  --circle-border-width: 10px;
  background: -webkit-linear-gradient(top left, crimson, blue, pink);
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  padding: var(--circle-border-width);
}

.content {
  width: var(--circle-size);
  height: var(--circle-size);
  background: white;
  border-radius: 50%;
}

<div class="circle">
  <div class="content"></div>
</div>

Border radius not working when border-image-syle used

2 Answers2