Create doughnut shape in CSS [duplicate]

Question

I know how to create a css circle with border radius etc, but i'm interested in creating a css only doughnut shape roughly like this one here ->

It would be one div but curved round back onto itself,

any ideas??

Answer 1

<div class="doughnut"></div>


.doughnut { 
    border: 50px solid #f00;
    border-radius: 100px;
    height:100px;
    width:100px;
}

Answer 2

This shape can also be drawn with css3 radial-gradient():

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
}

body {
  background: linear-gradient(orange, red) no-repeat;
  min-height: 100vh;
  margin: 0;
}

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
  border-radius: 100%;
  height: 300px;
  width: 300px;
  margin: 25px;
}

<div></div>