Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.