border-radius with border-image

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>

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>