Im having some trouble setting up rounded corners on <div>'s. The problem arises when the outer <div> is rounded and then the inner <div> protudes into the rounded corner area. Do i just apply the same rounded corner radius to the inner <div>?

Do i just apply the same rounded corner radius to the inner <div>?

That will work. Do you want the inner div to be rounded? The other solution is to make the inner div dimensions smaller than the outer div. Of course, w/o seeing the code in question, it's hard to say what else may be affecting it.

You can see the code in use here. Its the header to the menu navigation.

Uhh.. better check that link, the full css-reset is being displayed and there is no styling.

I can't see a problem with the styling not showing up, which browser are you using?

well, from what I can see in Opera's Dragonfly, it looks like you've got #menu with your rounded corners, then directly inside that you've got .menu-holder.

.menu-holder appears to have a white background in it. Try removing that.

Ive done that and now part of the background is grey and the rounded corners still have a little nick taken out of them.

I commented out this line in your stylesheet:

#menu .menu-title {
	padding: 5px;
	display: block;
	/* background-color: #F5F5F5; */ <--- this line!
	border-bottom: 1px solid #AAAAAA;
	/* background-color: #F5F5F5;
	border: 1px solid #E3E3E3; */
}

And the problem is gone. Apply the background color to the box with the round corners.

Yeah that works, ive assigned the white background to the #menu-holder-inner, but now that has taken a nick out of the border radius at the bottom.

maybe add a corner radius to the bottom corners of that div?

Ok, should it be the same as the outer or smaller?

It'll have to be slighty smaller, but have a play with some different radiuses and see what looks best. Either that, or separate the menu out, so you have a top half with a grey background, top corners rounded, bottom ones square, and then make the bottom part the opposite, with a white background.

You can use this code for rounded border

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
} #Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
 #Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
 #Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
 #Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
 #Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}