Draw Circle using css alone [duplicate]

Question

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

This is included in How to make a circle around content using CSS? — Martin Thoma
– Martin Thoma, Commented Jun 29, 2013 at 17:28

mplungjan · Accepted Answer · 2017-03-06 06:31:22Z

243

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 6, 2017 at 6:31

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Aug 4, 2011 at 6:20

Tatu Ulmanen

125k34 gold badges190 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

adam Over a year ago

I am using IE8, and this demo does not work. It shows a red square.

jcreamer898 Over a year ago

IE8 does not support border-radius, so that makes sense... Great idea for modern browsers though, very cool...

Gavin Over a year ago

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.

fearis Over a year ago

use a polyfille for ie8 css3pie.com and use border-radius:100%; for responsive circle use padding-bottom:40%; width:40%; height:0; overflow:visible;

Atav32 Over a year ago

this doesn't work well if the circle is really really small

|

mplungjan · Accepted Answer · 2017-03-06 06:30:34Z

178

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 6, 2017 at 6:30

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Aug 4, 2011 at 6:22

Tom

45.1k4 gold badges44 silver badges61 bronze badges

4 Comments

Tatu Ulmanen Over a year ago

: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.

Pierre de LESPINAY Over a year ago

Maybe also we can set margin: -0.5em -0.3em -0.3em -0.1em

bjg222 Over a year ago

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 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 (caniuse.com/#search=border-radius), so should be the accepted answer.

oldboy Over a year ago

is there a way to appease the SEO gods, even if i use an image of circular text, instead of rotating each letter?

web-tiki · Accepted Answer · 2015-02-12 08:30:50Z

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, 2015 at 8:30

web-tiki

104k33 gold badges226 silver badges258 bronze badges

answered Jan 5, 2015 at 9:43

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

6 Comments

Atav32 Over a year ago

pretty awesome gradients

jbutler483 Over a year ago

@Atav32: thanks! It's actually done using multiple box shadows :)

jbutler483 Over a year ago

thank you @degenerate ! I hope you well on your CSS journey :)

NickG Over a year ago

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

jbutler483 Over a year ago

thanks @NickG I appreciate it :)

|

Salman Arshad · Accepted Answer · 2014-12-05 23:05:15Z

14

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 5, 2014 at 23:05

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

answered Jun 16, 2013 at 12:43

Sunit

3851 gold badge5 silver badges6 bronze badges

Comments

AeJey · Accepted Answer · 2014-05-20 11:20:59Z

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, 2014 at 11:20

AeJey

1,45720 silver badges41 bronze badges

Comments

Erik Schierboom · Accepted Answer · 2013-06-16 13:32:43Z

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, 2013 at 13:32

Erik Schierboom

16.7k10 gold badges67 silver badges82 bronze badges

answered Jan 29, 2013 at 5:07

user1999828

Collectives™ on Stack Overflow

Draw Circle using css alone [duplicate]

6 Answers 6

6 Comments

4 Comments

6 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

4 Comments

6 Comments

Comments

Comments

Comments

Linked

Related