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:
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
