Rounded Corners on Top and Bottom of page

[scottbruzek 0]

For www.bruzekcomm.com, I am trying to get the corners of the white area (main body) of my site to be rounded. I have rounded edges on my main nav, so I know the rounded edges generally render properly. I have tried the below code (for the bottom of the page) with all the css section breakdowns to no avail. I have installed the code in Custom CSS and base.css. A code inspect of the bottom white section, directly above the footer, shows the below code, but it is not rendering in the browser.

div.outline.fix, div.page-main.container-group.fix, div#morefoot.container.fix {
	/* bottom-right rounded corner */
		-webkit-border-bottom-right-radius: 10px;
		-khtml-border-radius-bottomright: 10px;
		-moz-border-radius-bottomright: 10px;
		border-bottom-right-radius: 10px;
	/* bottom-left rounded corner */
		-webkit-border-bottom-left-radius: 10px;
		-khtml-border-radius-bottomleft: 10px;
		-moz-border-radius-bottomleft: 10px;
		border-bottom-left-radius: 10px;
		}

Please let me know if there is something I am missing here, and what I can do to get the code to render. Thanks!

[bryan-hadaway 3]

This is what I'm seeing render in the CSS: ` div.outline.fix, div.page-main.container-group.fix, div#morefoot.container.fix { -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; } ` Check here for the correct syntax: http://www.css3.info/preview/rounded-border/ Thanks, Bryan

[scottbruzek 0]

I've streamlined the code and double checked that I'm pulling the right id/class. I still am not getting the code to render. Here is what is updated in base.css:

div.outline.fix, div#page-main.container-group.fix, div#morefoot.container.fix {
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	}

[scottbruzek 0]

bump

[Kate 3]

Hey Scott- To start with, the syntax of the divs isn't correct. For example, "div#morefoot.container.fix" is referring to both the id and the classes, and there's no space in between anyhow. So, if you're trying to manipulate the "morefoot" div, simply use "#morefoot", or "div#morefoot". With that in mind: if you were to use that (correct) syntax and put a background color to "morefoot", you would see your changes actually are being applied. However, since this div is contained within another, and both have a white background, you're not seeing it. So, you have two choices: the first is to pull the #morefoot down with a negative margin. Or, target the outer div instead. Option one would look like this:

#morefoot{-moz-border-radius:10px;border-radius:10px;margin-bottom:-10px;}

You may then want to increase the top margin of the div that follows (by 10 px), but that's up to you. Option two looks like this:

#page-canvas{-moz-border-radius:10px;border-radius:10px;}

Hope that helps

[scottbruzek 0]

Thank you Kate. I will play around with this and try and get it to work as expected.

[Kate 3]

No problem... I tried both techniques I suggested, so they should work

[scottbruzek 0]

I was able to get it to render properly as I hoped. Thanks again for your support on this issue!