Draw Circle using css alone [duplicate]

Question

This question already has answers here:

How to draw circle in html page? (16 answers)

Closed 4 years ago.

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

Answer 1

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>

Answer 2

This will work in all browsers

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

Answer 3

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

Answer 4

yes it is possible you can use border-radius CSS property. For more info have a look at http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity

Answer 5

yup.. here's my code:

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

Answer 6

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

•

and use css to change color. Output:

•