Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Nav with Curved Comers Using Images



5:32 pm on Feb 15, 2011 (gmt 0)

10+ Year Member

The following works well for horizontal menu buttons where the background images are 5px wide gifs giving the appearance of the top and bottom having a curved bevel:


ul#navbar {
padding: 0;
margin: 0;
color: #fff;
float: left;
width: 100%;
ul#navbar li {
display: inline;
ul#navbar li a {
margin-right: 10px;
margin-bottom: 20px;

color: #fff;
text-decoration: none;
float: left;
ul#navbar a:link, ul#navbar a:visited { color: #fff; }
ul#navbar a:focus, ul#navbar a:active, ul#navbar li a:hover {
color: #000;


<ul id="navbar">
<li><a href="../index.php">Home</a></li>
<li><a href="../Something.php">Electric</a></li>
<li><a href="../else.php">Something else</a></li>
<li><a href="../support.php">Support</a></li>

But I would like to add images to each side of the buttons so that the button sides appear to have bevels and rounded corners.

Anyway of doing that simply - or must I do a major overhaul and call up absolute positioning?


10:24 am on Feb 16, 2011 (gmt 0)

I happen to be working on a menubar with curved buttons. I made my buttons in the right shape, so the image already has the curves in it and this works very well. No difficult things, just make the right image and you only have to deal with making a menu bar like you do when you use "normal" images. Or didn't I understand your question in the right way?


11:09 am on Feb 16, 2011 (gmt 0)

10+ Year Member

Thanks for coming back to me. I was trying to do to things - minimise the actual image (so using tiling of the 5px-wide background image for the main area of the button) and allow for differing lengths of button text. I have seen something that calls up a wider image (no great penalty if using a gif) and then closes off at the right width with a right-hand end image. I'll play with that, and drop in a note of how I got on.

Featured Threads

Hot Threads This Week

Hot Threads This Month