Vertical menu and rounded corners

rfeio
avatar
rank newbie

newbie


Posts: 1
Joined: 2008-05-18

Posted: Sun, 2008-05-18 14:26

Hi,

I'm a newbie on CSS and have been trying to create a vertical menu using unordered lists. I now would like to add rounded corners to the menu and I don't seem to be able to do that...

Here's my working vertical menu HTML:

<div id="left_side_area">

<div id="vmenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MY ACCOUNT</a></li>
<li><a href="#">MOST VISITED</a></li>
<li><a href="#">RECOMMENDED</a></li>
<li class="last_option"><a href="#">MY FAVOURITES</a></li>
</ul>
</div>
</div>

And here's the CSS:

#vmenu {
width: 170px;
font-family: arial, helvetica, sans-serif;
}

#vmenu ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #F58C22;
}

#vmenu li {
background-image: url(images/m16.gif);
background-repeat: no-repeat;
background-position: 5px 10px;
padding-left: 10px;
margin-right: 5px;
margin-left: 5px;
border-bottom:1px dotted yellow;
}

#vmenu li.last_option{
border-style:none;

}

#vmenu li a:link, #vmenu li a:visited {
font-size: 75%;
font-weight: bold;
font-family: arial;
display: block;
padding: 0.4em 0 0.4em 0.5em;
color: #FFFFFF;
text-decoration: none;

}

#vmenu a { display: inline-block; }
#vmenu a { display: block; }

I now have 4 corners and also 1 header and 1 footer with the corners on them. Could you please let me know how I could add rounded corners in order to make it compatible with the most common browsers?

Thanks!

RF

Tyssen
Tyssen's picture
rank Moderator

Moderator


Posts: 6509
Joined: 2004-05-01
Location: Brisbane

What's it s'posed to look

Posted: Mon, 2008-05-19 02:05

What's it s'posed to look like?

How to get help
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use tags.
My articles | CSS Reference