Looking to design a circle using CSS with a gradient border, and an inner area that is transparent to achieve this look:
https://i.sstatic.net/wN1Mg.png
While there are methods for creating a gradient border without transparency, such as the one shown in the code below, they typically involve overlaying a solid-colored div over the gradient.
#cont{
background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
width: 150px;
height: 150px;
border-radius: 1000px;
padding: 5px;
}
#box{
background: #fff;
width: 150px;
height: 150px;
border-radius: 1000px;
}
#example {
background: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
}<div id="example">
<div id="cont">
<div id="box"></div>
</div>
</div>