Home » Labs » How to make circle in CSS  

How to make circle in CSS
Filed under Labs

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

Demo

Tags:

Posts you may like: