Circles with pure CSS

In this post, we will show you how to make circles using pure CSS. We will then use JavaScript to make a pretty bubbly background.

Making a circle in CSS is straight-forward. All you have to do is a square div (width=height) and add a border radius that is half the width.


				<style type="text/css">
   div.circle1 {
     width:100px;
     height:100px;
     -webkit-border-radius:50px;
     -moz-border-radius:50px;
     border-radius:50px;
     background-color:#FF0000;
     float:left;
     margin-left:10px;
     margin-right:10px;
   }
	div.circle2 {
     width:100px;
     height:100px;
     -webkit-border-radius:50px;
     -moz-border-radius:50px;
     border-radius:50px;
     background-color:rgba(50,255,130,0.2);
     float:left;
     margin-left:10px;
     margin-right:10px;
	}

	div.circle3 {
     width:100px;
     height:100px;
     -webkit-border-radius:50px;
     -moz-border-radius:50px;
     border-radius:50px;
     border:1px dotted blue;
     float:left;
     margin-left:10px;
     margin-right:10px;
	}	
</style>

The above code will give:

Now that we know how to make circles using CSS, we can make a little JavaScript to fill a div with random circles ...

or with regular patterns ...