Creating a circle with CSS

1 vote(s)

Rating: 5 out of 5

Article posted by Dotnetrajanikanth on 4/20/2012 | Views: 4939 | Category: CSS | Level: Beginner | Points: 250

Submit 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

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.

Found interesting? Add this to:

| More | Bookmark It

Please Sign In to vote for this post.

Latest Articles from Dotnetrajanikanth

◘ Return Multiple Values(or Objects) in VB.NET

◘ Creating a circle with CSS

About Rohith Gopi

Experience:	1 year(s)
Home page:	http://www.dotnetfunda.com
Member since:	Wednesday, April 18, 2012
Level:	Starter
Status:	[Member]
Biography:

Responses
Posted by: Dotnetrajanikanth \| Posted on: 23 Apr 2012 07:06:13 AM \| 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 !!!

>> Write Response - Respond to this post and get points

Latest Articles

◘ Cascading Drop downlist in ASP.NET

◘ App Innovation Winner Brings Speech to the Silent

◘ Find the Factorial of number(s) in SQL Server

◘ Find Second highest salary for each department in SQL Server

◘ Let us learn ROLLUP function in SQL Server

◘ Road Construction - Solution for Coding Challenge by Capgemini

◘ Let us learn the Compose and Decompose function of Oracle

◘ Let us know about Ratio_To_Report Function in Oracle

◘ Small Project on How to use the Chart Control in ASP.NET?

More ...

External Style Sheet

External style sheets have many powerful that make them ubiquitous in professional Web sites: It keeps your website design and content separate. It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag. You can make drastic changes to your web pages with just a few changes in a single CSS file. It allows a single style sheet to control the rendering of multiple documents. This results in a time-savings for the author, a savings of space for the web server, and less download time for the user. This method can be used in both HTML and XML.

How to use Transition,Text-Shadow and Border-Radius effect in CSS 3?

In this article we are going to learn, how to use transition, text-shadow and border-radius in CSS3.

Common CSS code to change html elements look and feel

This article describe how to write common css code to change the look and feel of html elements.

Conditional statement in CSS

You must have came across some .css issues related with the browser behavior. Some of the styles that works in IE doesn't work in FireFox. In that situation you need to write conditional code for both browsers.

How to use Opacity, Scale and box shadow and Zooming in CSS 3?

In this article we are going to learn, how to use Opacity, Scale and box shadow and Zooming effects in CSS 3.

More ...