draw 1/2 or 1/4 equal line width circle line with css

Question

How to draw 1/2 or 1/4 "equal" line width circle with css ?
(not svg)

the whole line not equal width how to fix it
https://jsfiddle.net/ryxq1e91/

.circle {
    position: relative;
    display: inline-block;

    width: 40px;
    height: 40px;

    background-color: red;
}
.circle >div {
  top: 11px;
  left: 14px;
}
.circle >div {
  position: relative;

  width: 12px;
  height: 12px;
  border-bottom-right: 1px solid rgba(40,40,40,1);
  border-bottom: 1px solid rgba(40,40,40,1);
  border-bottom-left: 1px solid rgba(40,40,40,1);
  border-radius: 8px;      
}

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

Answer 1

As another option if you want to keep the full div, just make the borders that you don't want transparent. The only caveat is that it will appear 45 degrees rotated, so just transform it with a transform: rotate(45deg).

Note that I'm unsure what the support for this is.

1/4 Circle

.circle {
    position: relative;
    display: inline-block;

    width: 120px;
    height: 120px;

    background-color: red;
}
.circle >div {
  top: 10px;
  left: 10px;
}
.circle >div {
  position: relative;

  width: 100px;
  height: 100px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid rgba(40,40,40,1);
  border-left: 1px solid transparent;
  border-top: 1px solid transparent;
  border-radius: 50px;
  transform: rotate(45deg);
}

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

1/2 Circle

.circle {
    position: relative;
    display: inline-block;

    width: 120px;
    height: 120px;

    background-color: red;
}
.circle >div {
  top: 10px;
  left: 10px;
}
.circle >div {
  position: relative;

  width: 100px;
  height: 100px;
  border-right: 1px solid rgba(40,40,40,1);
  border-bottom: 1px solid rgba(40,40,40,1);
  border-left: 1px solid transparent;
  border-top: 1px solid transparent;
  border-radius: 50px;
  transform: rotate(45deg);
}

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