如何使用css在圆上创建边框？

Question

我想创建这样的圈子：

在测试了多种解决方案之后，我得到了：

不一样，这是我的代码

#circle, #circle .segment {
    		border-color: green;
    		border-radius: 50%;
    		border-style: solid;
    		border-width: 5px;
    		box-sizing: border-box;
    		height: 150px;
    		position: relative;
    		width: 150px;
    	}
    
    	#circle .segment {
    		-webkit-clip-path: inset(0 25px 50px 10px);
    		left: -5px;
    		position: absolute;
    		top: -5px;
    	}
    
    	#circle .segment:nth-child(1) {border-color: lightgray; transform: rotate(80deg);}

 <div id="circle">
    	<div class="segment"></div>
    </div>

如何像第一张图片一样？ 谢谢进阶