Как сделать на CSS неполную обводку круга?

.pie { 
  display: inline-block; 
  margin: .5em; 
  width: 8em; 
  height: 8em; 
  position: relative; 
  border-radius: 50%; 
} 
 
.pie:after { 
  border-radius: 50%; 
  display: block; 
  content: ""; 
  background: #fff; 
  position: absolute; 
    left: .5em; 
  top: .5em; 
  height: 7em; 
  width: 7em; 
} 
 
 
 
.p1 { 
  background-image: linear-gradient(-30deg, #ddd 50%, transparent 50%), 
                    linear-gradient(90deg, #ddd 50%, steelblue 50%); 
} 
 
.p2 { 
  background-image: linear-gradient(90deg, #ddd 50%, steelblue 50%); 
} 
 
.p3 { 
  background-image: linear-gradient(150deg, transparent 50%, steelblue 50%), 
                    linear-gradient(90deg, #ddd 50%, steelblue 50%); 
} 
 
.p4 { 
  background-image: linear-gradient(270deg, transparent 50%, steelblue 50%), 
                    linear-gradient(180deg, #ddd 50%, steelblue 50%); 
}

<div class="pie p1"></div> 
<div class="pie p2"></div> 
<div class="pie p3"></div> 
<div class="pie p4"></div>

* { 
  margin: 0; 
} 
div { 
  width: 300px; 
  height: 300px; 
  border: 10px solid red; 
  border-right: 10px solid transparent; 
  border-radius: 300px; 
  margin: 20px auto; 
}

<div></div>