Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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:

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:


Code Info

Rate this code:

Date Posted: 01/09/2011

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive