Search code examples
cssbordergradientborder-radius

Border radius not working when border-image-syle used

vs code my code

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?

Solution

  • 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>