Create doughnut shape in CSS

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 -> enter image description here

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

any ideas??

I don't think it's possible with just one div. Now two divs is a different story... — Brigand, Dec 12 '11 at 01:14
@FakeRainBrigand it's definitely possibly with one div if you use :after like most css shapes. :) — Joseph Marikle, Dec 12 '11 at 01:15
or like this... not exactly a div curved back onto itself but a=it's one way. :P Only tested in chrome and obviously must be viewed in a css3 compatible browser. http://jsfiddle.net/VJtnA/ — Joseph Marikle, Dec 12 '11 at 01:20

score 45 · Accepted Answer · answered Dec 12 '11 at 01:19

45

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


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

answered Dec 12 '11 at 01:19

Seth

6,240
3
28
44

1

Demo: http://jsfiddle.net/CevXD/ – Jared Farrish Dec 12 '11 at 01:20

score 6 · Answer 2 · answered Dec 23 '16 at 10:04

6

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>

answered Dec 23 '16 at 10:04

Mohammad Usman

37,952
20
92
95

Brilliant, lets the DOM unchanged, which can definitely be a deal-breaker when dealing with hundreds of elements. – Bil5 Apr 29 '21 at 10:57

score 5 · Answer 3 · answered Dec 12 '11 at 01:23

5

Demo

div{width:200px; height:200px; border:1px solid black; position:relative; border-radius:200px;}
div:before{content:''; width:50px; height:50px; display:block; position:absolute; top:75px; left:75px; border:1px solid black; border-radius:200px;}

answered Dec 12 '11 at 01:23

bookcasey

39,223
13
77
94

score 0 · Answer 4 · answered Dec 12 '11 at 01:21

0

Just set the border radius to 50% of the div width:

Working sample

answered Dec 12 '11 at 01:21

Scott

21,475
8
43
55

score 0 · Answer 5 · answered Dec 12 '11 at 01:21

Th colors are off but this is as simple as it gets with some backwards compatibility. Can answer any questions later on if need be.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Donut</title>
<style>
#div1
{
 background-color: #f00;
 border: #f0f solid 1px;
 height: 100px;
 width: 100px;
 border-radius: 50px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
}
#div2
{
 background-color: #0f0;
 border: #f0f solid 1px;
 height: 60px;
 margin: 20px 0px 0px 20px;
 width: 60px;
 border-radius: 30px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
}
</style>
</head>

<body>
<div id="div1"><div id="div2">&#160;</div></div>

</body>
</html>

Create doughnut shape in CSS

5 Answers5

Linked