Creating a circle with CSS

Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 10803 red flag
Rating: 5 out of 5  
 1 vote(s)

Here i am going to teach you a very nice and cool css effect. Creating circles with css. Is it that amazing. I have tested it in mozilla firefox and chrome browsers. and it works fine.


Creating a circle in CSS3. This is pretty awesome write... and its simple too. Anybody who knows basic css can do this. hope every one will try this.


Objective of this article is to create a circle with css

Using the code

First thing is that you need to create a division in your webpage. Just using the <div>

Next is our css
The css is so simple. we are going to use the border-radius property in css3.

Note: the height and width should be equal.
.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
Now jus add the css class

<div class="circle">

The circel is ready.


so jus think how easy this thing is. Hope this will help the web designers out here.

Happy Coding

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Rohith Gopi
Member Level: Starter
Member Status: Member
Member Since: 4/18/2012 8:08:03 AM
Country: India

Login to vote for this post.

Comments or Responses

Posted by: Dotnetrajanikanth on: 4/23/2012 | Points: 25
Dear Readers,

I want to add one more thing. If you want to make an ellipse using css3 jus change the height and width make the height and width unequal... you will get ellipse.

Enjoy !!!
Posted by: Ishan7 on: 3/15/2021 | Points: 25
Making a circle is almost as easy as that. To create a circle, we can define the rayon-border on the element. This will create curved wedges on the item.

If we set it at 50%, there will be a circle . If you define a different width and height, we will get an oval instead.

#circle {
background: lightblue;
border-radius: 50%;
width: 100px;
height: 100px;

Login to post response

Comment using Facebook(Author doesn't get notification)