Advertisement
Advertisement


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

2014/07/18
1
130
7/18/2014 9:36:31 AM

Accepted Answer

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

2017/03/06
167
3/6/2017 6:30:34 AM


  • 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>

2015/02/12

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

&#8226;

and use css to change color. Output:

2014/12/05

This will work in all browsers

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

yup.. here's my code:

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

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

2011/08/04

Source: https://stackoverflow.com/questions/6936972
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]