I am trying to create a circular div with a border that only covers 3/4 of its circumference. Here's an example:
Here is what I have so far in my code:
<div id="Circle"></div>
#Circle {
overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
border: 3px solid #01542c;
z-index: 9;
padding:50%;
}
https://jsfiddle.net/pm97beyx/1/
My current approach involves overlaying another div on top and positioning it as a mask to hide the underlying border, but it feels like a temporary solution.