Nav with Curved Comers Using Images

[kiwibrit]

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:

CSS

ul#navbar {
padding: 0;
margin: 0;
color: #fff;
float: left;
width: 100%;
}
ul#navbar li { 
display: inline; 
}
ul#navbar li a {
background-image:url(../images/nav/main-1m.gif);
padding:3.5px;
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;
background-image:url(../images/nav/main-2m.gif);
}

HTML

<div>
<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>
</ul>
</div>

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?

[webprutser]

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?

[kiwibrit]

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.