Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?
-
6This question has been asked many times – OverZealous Aug 4 '11 at 6:21
-
1This is included in How to make a circle around content using CSS? – Martin Thoma Jun 29 '13 at 17:28
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).
-
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 4 '11 at 8:02 -
-
1Given 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. – 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 8:21
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:
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
<div id="circle"></div>
-
6
-
3IE8 does not support border-radius, so that makes sense... Great idea for modern browsers though, very cool... – jcreamer898 Feb 8 '13 at 14:37
-
35Instead 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
-
2use a polyfille for ie8 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
- 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 / (evenpseudo 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>
-
3
-
1
-
1
-
1I 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
border radius is good option, if struggling with old IE versions then try HTML codes
•
and use css to change color. Output:
•
This will work in all browsers
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
yup.. here's my code:
<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>
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