Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?
This question is related to
html
css
css-shapes
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 {_x000D_
background: #f00;_x000D_
width: 200px;_x000D_
height: 200px;_x000D_
border-radius: 50%;_x000D_
}
_x000D_
<div id="circle"></div>
_x000D_
This will work in all browsers
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
border-radius
of 50% which will make it circular in shape. (note: no prefix has been required for a long time)background-color
/ gradients / (even pseudo elements
) to create something like this:.red {_x000D_
background-color: red;_x000D_
}_x000D_
.green {_x000D_
background-color: green;_x000D_
}_x000D_
.blue {_x000D_
background-color: blue;_x000D_
}_x000D_
.yellow {_x000D_
background-color: yellow;_x000D_
}_x000D_
.sphere {_x000D_
height: 200px;_x000D_
width: 200px;_x000D_
border-radius: 50%;_x000D_
text-align: center;_x000D_
vertical-align: middle;_x000D_
font-size: 500%;_x000D_
position: relative;_x000D_
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;_x000D_
display: inline-block;_x000D_
margin: 5%;_x000D_
}_x000D_
.sphere::after {_x000D_
background-color: rgba(255, 255, 255, 0.3);_x000D_
content: '';_x000D_
height: 45%;_x000D_
width: 12%;_x000D_
position: absolute;_x000D_
top: 4%;_x000D_
left: 15%;_x000D_
border-radius: 50%;_x000D_
transform: rotate(40deg);_x000D_
}
_x000D_
<div class="sphere red"></div>_x000D_
<div class="sphere green"></div>_x000D_
<div class="sphere blue"></div>_x000D_
<div class="sphere yellow"></div>_x000D_
<div class="sphere"></div>
_x000D_
yup.. here's my code:
<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>
border radius is good option, if struggling with old IE versions then try HTML codes
•
and use css to change color. Output:
•
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
Source: Stackoverflow.com