Полукруг очень просто делается на чистом css:
.radius {
display: block;
width: 50px; /* ширина в два раза меньше высоты, иначе получится полуовал */
height: 100px;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background: linear-gradient( rgb(101,220,167) 0%, rgb(53,112,94) 100%)
}
А обводку можно либо с помощью SVG сделать, либо двух кругов, фоновый с градиентом, а передний с белой заливкой и на пару пикселей меньше, например картинка часов и два псевдо-элемента
UPD:
вот вариант с SVG, либо инлайновый, либо заранее сделать SVG-картинку и подставлять в CSS к фону элемента
Средний
Простой
