I tried to add border-radius to my div element but not working

Question

I have a div element I wants to apply border radius of 100px, so that it will be in a circular shape. Unfortunately the border radius is not applying to the div element. The CSS selector looks like this:

  .battery-circle {
  border: 4px solid;
  border-image-slice: 1;
  border-radius: 30em;
  border-image-source: linear-gradient(to left, #743ad5, rgba(163,61,255,1) 84%);
}

score 0 · Answer 1 · answered Jul 10 '21 at 12:16

As per W3C spec:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

So as a work around you could try something like this:

.battery-circle {
  border: 4px solid transparent;
  border-image-slice: 1;
  border-radius: 30em;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to left, #743ad5, rgba(163,61,255,1) 84%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="battery-circle">test</div>

I tried to add border-radius to my div element but not working

1 Answers1