Draw Circle using css alone [duplicate] - html

Question

This question already has answers here:
How to draw circle in html page?
(19 answers)
Closed 7 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

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 3

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>

Answer 4

border radius is good option, if struggling with old IE versions then try HTML codes
•
and use css to change color. Output:
•

Answer 5

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 6

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