CSS Circle Menu
Author: Dynamic Drive
An interesting CSS trick is the creation of "circles", by using CSS3's border-radius property that's set to a very large value: When you do this, the border on each of the four corners of the element merge into a continuous round edge, creating the look of a circle. Using this nifty little trick, the following creates a series of circle menu links:
The key as mentioned is just to set the border-radius property to a very large value, at least 50% of both the width and height of the element:
width:100px; height:100px; border-radius: 400px; /*really large border radius to create round borders*/ -moz-border-radius: 400px; -webkit-border-radius: 400px;
This technique works in all browsers that support CSS3's border-radius property, namely, IE9+, FF3+, Safari, Chrome, and Opera 9+.