Dynamic Drive CSS Library- CSS Circle Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

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+.

The CSS:

<style type="text/css">

.circlemenu{
width: 100%;
overflow:hidden;
}

.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.circlemenu li{
display: inline;
margin: 0;
}

.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.circlemenu a span{
position:relative;
top:40%;
}

.circlemenu li a:visited{
color: white;
}

.circlemenu a:hover{
background: #a71b15;
}

</style>

The HTML:

<div class="circlemenu">
<ul>
<li><a href="http://www.dynamicdrive.com"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm"><span>DHTML</span></a></li>
<li><a href="http://www.cssdrive.com"><span>CSS</span></a></li>
<li><a href="http://www.codingforums.com"><span>Forums</span></a></li>
<li><a href="http://www.javascriptkit.com"><span>JavaScript</span></a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 01/09/2011

Revision History: None

Usage Terms: Click here

Your Comments (2)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

I'm now thinking of how to design my website and looking for navigation menu on my site. This menu looks a little bit weird!! I wish that dynamic drive could design more nice navigation bar. Rounded corner would be the best!! =)

Posted by MIXwebDesign on 01/10, 07:30 AM

either set the border-radius property to a smaller value, or look at the other choices for nav bars on this site!

Posted by Chris on 01/10, 08:33 PM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.