[JWait]

Here is the part of one of my skin1.css that makes the rounnded boxes with some added notes that may help someone. Please note that I chose not to put boxes around the individual products on the products page. You can also replicate the classes, renaming them from "x.." and "z..." to say "w..." and "y..." and by changing the properties (colors) you can have different colored boxes just by calling them in dialog.tpl and menu.tpl.

/*Round Dialog boxes*/

.xrounded h1, .zrounded h1 {
margin:0; 
font-size:1.2em; 
padding:0 8px 3px 8px; /* CSS short hand rule first value is top then right, bottom and left */
border-bottom:1px solid #68C1FF; /*  This is the color of the bottom border */
}
.xrounded p, .zrounded p {
margin:0; 
padding:5px 0; 
font-size:10px;
line-height:125%;
}
.xrounded {
background: transparent;  /*  This is the background color of the top area */
width:100%;   /*Adjust the width here*/
float:left; 
margin:0 0 15px 0;
line-height:125%;
}
.xtop, .xbottom {
display:block; 
background:transparent;  /*  This is the background color of the top and bottom area */
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #68C1FF;  /*  This is the color of the left side lines of the border */
border-right:1px solid #68C1FF; /*  This is the color of the right side lines of the border */
}
.xb1 {
margin:0 5px; 
background:#68C1FF;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #68C1FF; 
border-width:0 1px; 
height:auto;
background:#ffffff;
}

div.xboxcontent div{
padding: 0 4px 0 8px; /* CSS short hand rule first value is top then right, bottom and left */

}

* html .xboxcontent {
height:2px;
}

.color_a {
background-image: url(images/menu_bg.gif); /*  This is where you set an image for the top title area */
color:#ffffff;  /*  This is where you set the color for the top title area text */
}
.color_a A:link{
	COLOR: #fff; TEXT-DECORATION: none; /*  This is where you set the color for a link in the top title*/
}
.color_a A:visited {
	COLOR: #fff; TEXT-DECORATION: none; /*  This is where you set the color for a link in the top title*/
}

.color_a A:hover {
	COLOR: #0000cc; TEXT-DECORATION: underline; /*  This is where you set the color for a link in the top title*/
}

.color_a A:active  {
	COLOR: #fff; TEXT-DECORATION: none; /*  This is where you set the color for a link in the top title*/
}

I hope this help someone.