CSS - Menus with rounded corners without using images
I used to use images for menus and have tried various rollover techniques to create nice looking menus. One big problem I found using images is the flicker you get when hovering over a button.
I found myself using plain css buttons more and more due to these problems, and also because they are quicker to code.
The technique below makes use of the -moz-border-radius and -webkit-border-radius css properties, to create a menu with nice rounded corners, without using any images. I'm sure some CSS expert will tell me it is extremely bloated, but it works so I thought I would share it. These CSS properties can also be applied to other elements such as divs to create rounded corners.
Here's what the rounded menu looks like. This menu has been enclosed in a container div to restrict it's width.
It only works on browsers which support the css properties mentioned above, on other browsers such as IE6 (curse you) it simply displays the menu with straight edges, but doesn't break.
O.k so the CSS and html are below. The amount the corners are rounded is controlled by the border radius properties. You could have the menu change it's roundedness on hover etc.
The colors, font, size, and padding can be changed by playing around with the CSS. One thing I noticed is there must be a border of at least 1px specified, otherwise the rounded corners don't work. If you don't want to have a visible border, make it the same color as the background.
Menus with rounded corners CSS
ul.roundmenu {
padding:0;
margin : 10px;
list-style : none;
font-size : 1em;
letter-spacing:2px;
background-color : #fff;
overflow : hidden;
}
ul.roundmenu li {
border: 1px solid #fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color : #eee;
}
ul.roundmenu li a{
text-decoration : none;
display : block;
text-align:left;
color : #333333;
font-weight : bold;
padding-left : 10px;
padding-right : 10px;
line-height : 210%;
}
ul.roundmenu li a:link {
border: 1px solid #ddd;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
color : #333333;
}
ul.roundmenu li a:visited {
border: 1px solid #ddd;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
color : #333333;
}
ul.roundmenu li a:hover {
background-color : #feff93;
color : #000;
border: 1px solid #ddd;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
ul.roundmenu li a:active {
border: 1px solid #fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color : #feff93;
color : #000;
}
Menus with rounded corners HTML
<ul class="roundmenu"> <li><a href="#">Home</a></li> <li><a href="#">Dogs</a></li> <li><a href="#">Biscuits</a></li> </ul>
Posted by Tom on Fri 14th Aug 2009
