How to make circle in CSS
Here is a simple example of circles which is created by using CSS. It uses CSS border-radius property, and the drawback of this method is don’t work on IE8 and below because of lack of support for border-radius. But it work fine on modern browsers and hope you will enjoy this example.
Here is the details of code which used to build the CSS circle. You can view a working example on bottom of the post.
CSS
.circle { float:left; width: 150px; height: 150px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin:10px; } .red { background-color: #f43230; } .green { background-color: #2ecc71; } .blue { background-color: #2a7fb8; } .violet{ background:#9b59b6; } .violet-light{ background:#666699; } .black{ background:#000; } .circle-with-text:after { content: ""; display: block; width:250px; height:250px; background: #4679BD; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .circle-with-text div { float:left; width:100%; padding-top:50%; line-height:1em; margin-top:-0.5em; text-align:center; color:white; } |
HTML
<!-- circles --> <div class="wrapper"> <div class="circle red"></div> <div class="circle green"></div> <div class="circle blue"></div> <div class="circle violet"></div> <div class="circle violet-light"></div> <div class="circle black"></div> </div> <div class="wrapper-center"> <div class="circle-with-text"><div>Circle with text</div></div> </div> <!-- /circles --> |