border-radius with border-image

Question

In following code I expect both divs to be round. But the first one with border-image applied is square. How can I fix that and make it round too?

div {
  float: left;
  width: 130px;
  height: 130px;
  margin: auto;
  
  border: 30px solid transparent;
  border-radius: 50%;
  border-image: linear-gradient(45deg, red, blue) 30;
}

div + div {
  margin-left: 1em;
  border-image: none;
  border-color: green;
}

<div></div>
<div></div>

a related one with dashed border in case you need it: https://stackoverflow.com/a/60586691/8620333 — Temani Afif, May 27 '20 at 20:45

score 8 · Accepted Answer · edited Jan 20 '23 at 14:23

It is not possible to combine them. The W3 Spec says:

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.

However, you can achieve the same effect by using a multiple elements and a CSS gradient

#cont{
  background: -webkit-linear-gradient(left top, crimson 0%, blue 100%);
  width: 300px;
  height: 300px;
  border-radius: 1000px;
  padding: 10px;
}

#box{
  background: white;
  width: 300px;
  height: 300px;
  border-radius: 1000px;
}

<div id="cont">
  <div id="box"></div>
</div>

If you want a circle, just write `50%` in `border-radius` instead of writing enormous numbers in pixels. — NNL993, Jun 03 '23 at 15:41

score 5 · Answer 2 · edited May 27 '20 at 20:41

5

You can use radial-gradient background-image. And you can mask it with mask-image. border-image does not work with border-radius.

div {
  float: left;
  width: 190px;
  height: 190px;
  margin: auto;
  /* border: 30px solid transparent;
     border-radius: 50%;
    border-image: linear-gradient(45deg, red, blue) 30;*/
  border-radius: 50%;
  background: linear-gradient(45deg, red, blue);
  -webkit-mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
          mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
}

div+div {
  margin-left: 1em;
  border-image: none;
  border-color: green;
}

<div></div>
<div></div>

edited May 27 '20 at 20:41

Temani Afif

245,468
26
309
415

answered May 27 '20 at 20:34

doğukan

23,073
13
57
69

you can remove the `at 50% 50%` because it's already the default value – Temani Afif May 27 '20 at 20:40
@TemaniAfif thanks I removed – doğukan May 27 '20 at 20:40

border-radius with border-image

2 Answers2

Linked