CSS3 - border-radius and background

HTML & CSS
1

Hi folks!

Hope someone can just provide a quick fix to the following:

Please check http://www.affectia.com/demos/
The green menu item “Get the Toolbar!” you can see the background isn’t going inside the border… Same is the case when you hover on any other link in the menu.

In short, I’ll like to know that how can I get a child element with background inside the borders of a parent element with border-radius property?

Thanks!

2

You have to apply the border-radius to the a tag. Such as this for your home on hover to work properly (right now it’s getting the bg image with pointed corners, too):


ul.top_menu li a { /* classes.css (line 11) */
 border-radius:10px 0 0 10px;
 -moz-border-radius:10px 0 0 10px;
 -webkit-border-radius:10px 0 0 10px;
 border-right:1px solid #B3B3B3;
 color:#7F8593;
 float:left;
 padding:10px 25px;
}

And this for your “get the toolbar”:


ul.top_menu li.green a { /*classes.css (line 12) */
 border-radius:0 10px 10px 0;
 -moz-border-radius:0 10px 10px 0;
 -webkit-border-radius:0 10px 10px 0;
 background:url("images/top_menu_green_bg.gif") repeat-x scroll 0 0 #64B12F;
 border:0 none;
 color:#FFFFFF;
}