Creating a circle with CSS

Posted by Rohith Gopi in CSS 3 category on 4/20/2012 for Beginner level | Points: 250 | Views : 11310

Rating: 5 out of 5

1 vote(s)

Post Article |

Search Articles |

Articles Home

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.

Introduction

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

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>

<div>
Circle


</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%;
  background-color:Black;
  width: 200px;
  height: 200px; 
}

Now jus add the css class

<div class="circle">
Circle


</div>

The circel is ready.

Conclusion

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

Happy Coding

About the Author

Full Name: Rohith Gopi
Member Level: Starter
Member Status: Member
Member Since: 4/18/2012 8:08:03 AM
Country: India
____________ www.flickr.com/photos/psdesigner/
http://www.dotnetfunda.com

Bookmark It

Login to vote for this post.

Latest Articles

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

Comment using

(Author doesn't get notification)