Template modding with CSS rounded boxes/borders. How To?

[SeánT]

OK so with the help of a few decent helpful people, namely kobra, stevesh, and swguy I managed to get the Future Zen template installed and configured a good bit of the backend of my store. I then set about the aesthetic appearance of things and was trying to get a rounded box to sit around/behind the center of the page. This took me a long time and there was great wailing and gnashing of teeth. However using Snazzy Borders I finally got the sort of the layout I wanted, and was just about to go and make some decent images to replace the ones on the site, when I thought I'd better just give it all a check in IE and Chrome.

Oh dear. My rounded box courtesy of Snazzy Borders works properly in neither of the other browsers. Rather than try to fix this problem I'm wondering if there is anybody out there who would be able to hazard a guess how to integrate the following with Zen Cart? because not only is it better looking on the page but it appears to be perhaps more simple than the code that is used in Snazzy Borders. I tried positioning the DIV tag in the same place as the first Snazzy Borders <DIV> tag in tpl_main_page.php and the </DIV> where the last Snazzy Borders </DIV> tag was but that hasn't worked. I'm wondering really if anybody can explain why it hasn't worked or even tell me if what I am trying to do is possible given the code below.


TL;DR : How can I get these types of rounded borders working in Zen Cart?

the css

#border-radius {
		  	display:inline-block;
		  	padding:1em;
		  	border:3px solid #999;
		  	-moz-border-radius:8px;
		  	-webkit-border-radius:8px;
		  	-opera-border-radius:8px;
		  	-khtml-border-radius:8px;
		  	border-radius:8px;
		}

		#border-radius2 {
			display:inline-block;
			border:3px solid #999;
			padding:1em;
			-moz-border-radius:32px;
			-webkit-border-radius:32px;
			-opera-border-radius:32px;
			-khtml-border-radius:32px;
			border-radius:32px;
			text-align:center;
			width:13em;
			margin-left:1em;
			background:#eee;
		}

		#border-radius2 pre {
			background:transparent;
		}

		.css-demo {
		  	margin-bottom:1em;
		}

		.css-demo pre {
		  	background:transparent;
		  	margin:0px;
		  	padding:0px;
		  	border:none;
		}

XHTML

<!--example 1
<div id="border-radius" class="css-demo"></div>
	
<!----example 2
<div id="border-radius2" class="css-demo"></div>

also while I was on my travels I found this site which has a collection of different CSS rounded box styles some using images and some without. Some of them are very pleasing on the eye.

Also this is my potential store here

[EDIT]
Actually here is the place that css up above came from, there's code for nifty drop shadows as well.