How to keep background image inside border-radius?

HTML & CSS
1

I’ve got a list item nav menu in which the anchors have background images and rounded corners.

However, the background image is not being clipped at the corners. Its showing through behind the curve.

Can someone share with me what the workaround for this would be?

982×94 7.27 KB

.menu.top {text-transform:uppercase; position:absolute; margin:30px 0 0 0; border:1px solid #ccc; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; height:50px; width:920px;background:url(header.gif); background:url(gradient.png), url(header.gif);}
.menu.top.cat {overflow:visible;}
.menu.top ul {position: relative; list-style: none; z-index: 50; float:left; margin:0 -999em 0 1px; padding:0;}
.menu.top ul li {position: relative; float: left; margin:0 1px 1px 0;background:url(header.gif); background:url(gradient.png), url(header.gif);}
.menu.top ul ul {position: absolute; visibility: hidden; list-style: none; z-index: 9999;}
.menu.top ul ul li {display:block;width:100%}
.menu.top ul ul ul {left:150px;}
.menu.top ul ul li {clear: both;}
.menu.top ul a {display: block;  padding:0 20px; line-height:50px; color:#333; text-decoration:none; border-right:1px solid #ccc}
.menu.top ul ul ul {position: absolute; top: 0; }
.menu.top ul li:hover ul, .menu.top ul a:hover ul, .menu.top ul :hover ul :hover ul, .menu.top ul :hover ul :hover ul :hover ul { visibility: visible;}
.menu.top ul :hover ul ul, .menu.top ul :hover ul :hover ul ul { visibility: hidden; }
.menu.top ul a:hover, .menu.top ul li.current_page_item a {background:url(spot.gif);background:url(gradient.png) repeat-x, url(spot.gif);color:#333; text-decoration:none;}
.menu.top ul.children li.current-cat a {color:#333;}
2

check your code again. chances are that the border radius is not being applied to the tag with the bg image. Border radius doesnt clip content… ( sad, I know) but it doesnt so if the container has border radius, the children need to as well


.menu.top ul a {display: block;  padding:0 20px; line-height:50px; color:#333; text-decoration:none; border-right:1px solid #ccc}

see, on border radius on your anchor.

you probably don’t want to have border radius on ALL your anchors in this menu , judging from the picture…
so give the first anchor a class… which defines a border-radius of the left side only : border-radius:8px 0 0 8px;

3

@Dresden: thanks for that suggestion. I’m still stumped with this one though. I’ve added this css…

.menu.top li:first-child a {border-radius:8px 0 0 8px}

But I’m still getting the image spillover on the background image. See the closeup below in which I’ve added some contrast to the container div element to better illustrate the problem.

Perhaps it has to do with the fact that I’m using multiple background images on this anchor. I’ve got a spot color background image underneath a semi-transparent png.

4

OK, I’m almost there, here are the lines I had to change (but there’s still a problem - see below code)…


.menu.top ul li {position: relative; float: left; margin:0 1px 1px 0;/*background:url(header.gif); background:url(gradient.png), url(header.gif);*/}

.menu.top ul li a {display:block;  padding:0 20px; line-height:50px; color:#333; text-decoration:none; border-right:1px solid #ccc;background:url(header.gif);background:url(gradient.png), url(header.gif);}

.menu.top li:first-child a {border-radius:8px 0 0 8px}

OK, now this works on the first level. However, its also applying the first-child styling to the submenus (flyouts) as well, which I don’t want. See below…

This is a typical nested unordered list if that helps to understand the structure.

5

Hello,

It’s hard to help without your html’s code. I would guess using the child selector

.menu.top>li:first-child a {border-radius:8px 0 0 8px}

might fix it.

6

.menu.top li:first-child a {border-radius:8px 0 0 8px} will work. But I suggested ADDING A CLASS to prevent exactly wheat you are experiencing. :confused:

Anyway if you dont feel like adding a class to your mark up, you can do an override.

.menu.top li:first-child a {border-radius:8px 0 0 8px}
.menu.top li li a {border-radius:0}

7

I would try Candygirl’s suggestion of a child selector first, as long as this doesn’t need to work in older browsers like IE7 and under.

8

It would need to be this I believe otherwise you will other elements.


[B].menu.top> ul> li:first-child> a [/B]{
    border-radius:8px 0 0 8px;
    -moz-border-radius:8px 0 0 8px;
    -webkit-border-radius:8px 0 0 8px;
}