Help With Box Corners / Borders

[BenDesign]

I am working on a design and am having trouble with rounding the corners ... The hack I used is to place an image file in the bg of the container to form the bottom, and an absolutely-positioned bg image to do the top.

The problem is that I can't figure out how to do the side borders so I can maintain the borders. I've tried a few things with padding, margins, and positioning, but I'm stumped. Anybody have an idea how to do this?

http://globalsistergoods.com/newsletter/

PS. Yes, this is an html newsletter, which I know are taboo (and which I normally refuse to do), but it's for a good cause and only goes to a small, user-enrolled mailing list.

PPS. Haven't tested on IE6 -- Mac guy -- so there might be a few issues that I need to take care of. Hope you can still get the idea.

Thank you so much for your help!

[koyama]

Could you use a 1px high background image repeated in the y-direction? This would take care of the vertical border segments. Then you could use absolute positioning for the remaining segments (top and bottom).

I haven't really delved into rounded corners, but this is what I have seen before.

FYI the bottom left image with the two children (part of the background image) is being covered by text at higher zoom levels. Try using CTRL+'+' and you will see what I mean. The technique with inserting a 'white' float to push away text is perhaps problematic. I don't have any suggestions for solving this at the moment.

[FullMetal_Ed]

you can usee CSS to make rounded DIVS without images


<div id="header">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!-- Your Content Here
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>




that sets up the DIV


div#header{
background: #CD0000;
width: 67%;
float: left;
padding: 0;
}
b.rtop, b.rbottom{
display:block;
background: #000;
}
b.rtop b, b.rbottom b{
display:block;
height: 1px;
overflow: hidden;
background: #CD0000;
}
b.r1{
margin: 0 5px;
}
b.r2{
margin: 0 3px;
}
b.r3{
margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4{
margin: 0 1px;
height: 2px;
}


that should get the effect you want