Draw Circle using css alone

Question

Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?

This question [has been asked many times](http://www.google.com/search?q=site%3Astackoverflow.com+css+circle) — OverZealous, Aug 04 '11 at 06:21
This is included in [How to make a circle around content using CSS?](http://stackoverflow.com/q/9358882/562769) — Martin Thoma, Jun 29 '13 at 17:28

score 242 · Answer 1 · edited Mar 06 '17 at 06:31

242

Yep, draw a box and give it a border radius that is half the width of the box:

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Working demo:

http://jsfiddle.net/DsW9h/1/

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

<div id="circle"></div>

edited Mar 06 '17 at 06:31

mplungjan

169,008
28
173
236

answered Aug 04 '11 at 06:20

Tatu Ulmanen

123,288
34
187
185

6

I am using IE8, and this demo does not work. It shows a red square. – adam May 22 '12 at 19:23
3

IE8 does not support border-radius, so that makes sense... Great idea for modern browsers though, very cool... – jcreamer898 Feb 08 '13 at 14:37
39

Instead of supporting IE8 please ask your clients if you can show a message telling the user to upgrade their browser. It will benefit everyone, and Microsoft recommends it. Google even discontinued IE8 support in their web apps (Gmail, Calendar, Drive, Docs, etc.) at the end of 2012. It's ridiculous to support a 5 year old browser. – Gavin Sep 12 '13 at 10:08
2

use a polyfille for ie8 http://css3pie.com/ and use border-radius:100%; for responsive circle use padding-bottom:40%; width:40%; height:0; overflow:visible; – fearis Jun 29 '15 at 17:20
2

this doesn't work well if the circle is really really small – Atav32 Aug 28 '15 at 00:14
there is a much simpler way now using aspect-ratio: .circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; } – Felix Haeberle Mar 23 '23 at 07:14

score 177 · Accepted Answer · edited Mar 06 '17 at 06:30

177

You could use a .before with a content with a unicode symbol for a circle (25CF).

.circle:before {
  content: ' \25CF';
  font-size: 200px;
}

<span class="circle"></span>

I suggest this as border-radius won't work in IE8 and below (I recognize the fact that the suggestion is a bit mental).

edited Mar 06 '17 at 06:30

mplungjan

169,008
28
173
236

answered Aug 04 '11 at 06:22

Tom

43,583
4
41
61

4

`:before` doesn't work in IE7 and below, so this method only gains support for IE8 but makes it very hard to position the circle correcly. For example, font-size of 200px doesn't equate to a circle with a diameter of 200px and you lose antialiasing on some systems. – Tatu Ulmanen Aug 04 '11 at 08:02
Maybe also we can set `margin: -0.5em -0.3em -0.3em -0.1em` – Pierre de LESPINAY Nov 30 '12 at 12:41
1

Given that at this point, IE 8 is nearly 10 years old, this should no longer be the accepted answer. It is reasonable to drop support for it, as according to https://caniuse.com/usage-table, IE 8 currently has a 0.18% share of usage, and most modern websites have done so. The border-radius property is now supported pretty much across the board (https://caniuse.com/#search=border-radius), so should be the accepted answer. – bjg222 Aug 24 '18 at 22:19
is there a way to appease the SEO gods, even if i use an image of circular text, instead of rotating each letter? – oldboy Oct 19 '20 at 08:21

score 52 · Answer 3 · edited Feb 12 '15 at 08:30

52

Create a div with a set height and width (so, for a circle, use the same height and width), forming a square
add a border-radius of 50% which will make it circular in shape. (note: no prefix has been required for a long time)
You can then play around with background-color / gradients / (even pseudo elements) to create something like this:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}

<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>

edited Feb 12 '15 at 08:30

web-tiki

99,765
32
217
249

answered Jan 05 '15 at 09:43

jbutler483

24,074
9
92
145

3

pretty awesome gradients – Atav32 Aug 28 '15 at 00:16
1

@Atav32: thanks! It's actually done using multiple box shadows :) – jbutler483 Aug 28 '15 at 10:34
I learned a lot from this simple example. Thank you very much for it. – degenerate Jul 15 '16 at 14:23
1

thank you @degenerate ! I hope you well on your CSS journey :) – jbutler483 Jul 15 '16 at 16:20
1

I was going to post an angry reply saying that it's the same answer as Tatu's but then I clicked "Run Code".... #micdrop – NickG Sep 15 '16 at 15:58
1

thanks @NickG I appreciate it :) – jbutler483 Sep 15 '16 at 20:37

score 15 · Answer 4 · edited Dec 05 '14 at 23:05

15

border radius is good option, if struggling with old IE versions then try HTML codes

&#8226;

and use css to change color. Output:

•

edited Dec 05 '14 at 23:05

Salman A

262,204
82
430
521

answered Jun 16 '13 at 12:43

Sunit

403
1
5
6

score 11 · Answer 5 · answered May 20 '14 at 11:20

11

This will work in all browsers

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

answered May 20 '14 at 11:20

AeJey

1,447
20
40

score 9 · Answer 6 · edited Jun 16 '13 at 13:32

9

yup.. here's my code:

<style>
  .circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: blue
  }
</style>
<div class="circle">
</div>

edited Jun 16 '13 at 13:32

Erik Schierboom

16,301
10
64
81

answered Jan 29 '13 at 05:07

Draw Circle using css alone

6 Answers6

Linked

Related