Hi,

I am trying to create a box with rounded corners exactly like this one:
http://force10x.freehostia.com/css_mess/box.jpg
(Please copy and paste the url in the location bar.)

I will be using PHP/MySQL to create multiple box one below the other.

Creating this using tables is easy. It is not only quicker, but I guess I can easily replicate the rows using php/mysql.

I am not sure how to go about it using css though.

I tried the following code in CSS and its not only getting huge but also makes the code look messy as it has too many div tags.

In HTML

<div class="curvetop">
New Category
<span style="position:absolute; text-align:right; right:20px; top:6px;"><a href="print.htm" onMouseOver="document.printImg.src='images/icon_print_02.gif'" onMouseOut="document.printImg.src='images/icon_print_01.gif'"><img src="images/icon_print_01.gif" width="41" height="29" alt="Create New Category" title="Create New Category" name="printImg" border="0" /></a>
</span>
</div>
<div class="boxcenter">

</div>
<div class="curvebottom">
</div>

In CSS

.curvetop{

	width: 540px;
	margin: 0px;
	padding: 6px 0px 7px 10px;
	background: #99ccff url(images/curves_top.gif) no-repeat top left;
	color:#003366;
	font: normal bold 100% verdana;
	}
.curvebottom{
	
	width: 540px;
	margin: 0px;
	padding: 0px;
	background: #ffffff url(images/curves_bottom.gif) no-repeat bottom left;
}
.boxcenter{
	width: 540px;
	margin: 0px;
	padding: 4px;
	background: #ffffff;
	
	border-style: solid;
	border-width: 0px 1px 0px 1px;
	border-color:#99ccff;
}

Both I.E. and firefox display it differently.

(Cm:links removed)

The blue band below is the footer, which is part of a two column layout.
In I.E the column extends as expected (fluid height???) where as in Fire Fox it does not.

any guidance with this would be great.

Thank you.

Edit:
edited to include this url where you can see all the above three images.
http://force10x.freehostia.com/css_m...undCorners.htm

[Codemonkey]

fyi, the images are not showing up (all I see is the hosting company... baaad, baaaad)

[force10x]

sorry about that. That is a free host I am using.
You can see the file now.
http://force10x.freehostia.com/css_m...undCorners.htm


thanks for yoour time.
cheers!

[force10x]

Nearly got it working
http://force10x.freehostia.com/css_mess/newCategory.htm

not sure if this is the correct method though.

plus in I.E. a one pixel gap can be seen just above the lower curve

any help?

[force10x]

any pointers anyone? thank you.

[QaBOjk]

This technique uses a single image to create all 4 corners.
I have used this technique and it has worked well for me.
http://www.schillmania.com/projects/dialog2/