Creating a circle with CSS

Dotnetrajanikanth
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 8644 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.

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

Page copy protected against web site content infringement by Copyscape

About the Author

Dotnetrajanikanth
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

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

Login to post response

Comment using Facebook(Author doesn't get notification)