1 reply [Last post]
rfeio
Offline
newbie
Last seen: 6 years 22 weeks ago
Joined: 2008-05-18
Posts: 1
Points: 0

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:

  • HOME
  • MY ACCOUNT
  • MOST VISITED
  • RECOMMENDED
  • MY FAVOURITES

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
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

What's it s'posed to look

What's it s'posed to look like?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference