Have you ever wanted to create rounded corners with alpha transparency, but didn’t think you could get it to work in IE6? Believe it or not, it can be done. It requires quite a bit of HTML, but this is a sacrifice that must be made in order for the alpha transparency to work.
First, we must separate the box into three sections: top, middle, and bottom. The top and bottom must be separate from the middle if you plan on having a full background behind all the content in the box. This way the transparency on the corners will not show the background from the middle section. I divided this into three separate DIVs:
<div class="ContentTop"></div> <div class="ContentMiddle"></div> <div class="ContentBottom"></div>
Next, we need to add several DIVs inside the top and bottom sections that will act as the corners and center section(s). 
(We may need more than one center section if there is a repeating background with a shadow as shown in the image on the right.) We also need to apply styles to these corners and sections. For starters, we know that the left and right corners must be the same size as the background images, since this is the only way to get IE6 to properly display alpha transparency. We will use absolutely positioned DIVs to achieve this. Listed below is the code for all browsers except IE6. The code for IE6 will be shown last. However, we still need to consider the shortcomings of IE6 when designing the rounded corners.
<div class="ContentTop"><div class="ContentTopLeft"></div><div class="ContentTopRight"></div><div class="ContentTopCenter"></div></div>
<div class="ContentMiddle"></div>
<div class="ContentBottom"><div class="ContentBottomLeft"></div><div class="ContentBottomRight"></div><div class="ContentBottomCenter1"></div><div class="ContentBottomCenter2"></div></div>
<style>
.ContentTop, .ContentTopLeft, .ContentTopRight, .ContentTopCenter { height: 47px; }
.ContentTop { position: relative; padding: 0px 42px 0px 38px; }
.ContentTopLeft { background: url(images/contenttopleft.png) bottom left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
.ContentTopRight { background: url(images/contenttopright.png) bottom right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
.ContentTopCenter { background: url(images/contenttop.png) bottom left repeat-x; }
.ContentBottom, .ContentBottomLeft, .ContentBottomRight, { height: 52px; }
.ContentBottom { position: relative; padding: 0px 42px 0px 38px; }
.ContentBottomLeft { background: url(images/contentbottomleft.png) top left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
.ContentBottomRight { background: url(images/contentbottomright.png) top right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
.ContentBottomCenter1 { background: url(images/contentbottom.png) top left repeat-x; height: 47px; }
.ContentBottomCenter2 { background: url(images/contentshadow.png) top left repeat-x; height: 5px; }
</style>
Optionally, there may be a shadow on the right or left of the content. This can be pretty tricky, especially when trying to get it to work in IE6. In fact, it won’t work completely in IE6 when javascript is disabled. I used a shadow on the right. Here is the code:
<div class="ContentMiddle">
<div class="Content"><!-- Content Goes Here --></div>
<div class="ContentRight"></div>
</div>
<style>
.ContentMiddle { height: 1%; overflow: auto; position: relative; padding-right: 5px; }
.Content { background: url(images/contentbg.jpg) top center no-repeat; padding: 30px; }
.ContentRight { background: url(images/contentright.png) top right repeat-y; height: 100%; position: absolute; right: 0px; top: 0px; width: 6px; }
</style>
Now, to add in all the IE6 code. We basically replace all the transparent background images with the filter property. We also add in some javascript code to make the right shadow the full height of its container.
<!--[if lt IE 7]>
<style>
.ContentTopLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopleft.png', sizingMethod='scale'); }
.ContentTopRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopright.png', sizingMethod='scale'); }
.ContentRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentright.png', sizingMethod='scale'); height: expression(this.parentNode.clientHeight + 'px'); }
.ContentBottomLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomleft.png', sizingMethod='scale'); }
.ContentBottomRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomright.png', sizingMethod='scale'); }
.ContentBottomCenter2 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentshadow.png', sizingMethod='scale'); overflow: hidden; }
</style>
<![endif]-->
Finally, putting it all together we have:
<div class="ContentTop"><div class="ContentTopLeft"></div><div class="ContentTopRight"></div><div class="ContentTopCenter"></div></div>
<div class="ContentMiddle">
<div class="Content"><!-- Content Goes Here --></div>
<div class="ContentRight"></div>
</div>
<div class="ContentBottom"><div class="ContentBottomLeft"></div><div class="ContentBottomRight"></div><div class="ContentBottomCenter1"></div><div class="ContentBottomCenter2"></div></div>
<style>
.ContentTop, .ContentTopLeft, .ContentTopRight, .ContentTopCenter { height: 47px; }
.ContentTop { position: relative; padding: 0px 42px 0px 38px; }
.ContentTopLeft { background: url(images/contenttopleft.png) bottom left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
.ContentTopRight { background: url(images/contenttopright.png) bottom right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
.ContentTopCenter { background: url(images/contenttop.png) bottom left repeat-x; }
.ContentMiddle { height: 1%; overflow: auto; position: relative; padding-right: 4px; }
.Content { background: url(images/contentbg.jpg) top center no-repeat; padding: 30px; }
.ContentRight { background: url(images/contentright.png) top right repeat-y; height: 100%; position: absolute; right: 0px; top: 0px; width: 4px; }
.ContentBottom, .ContentBottomLeft, .ContentBottomRight, { height: 52px; }
.ContentBottom { position: relative; padding: 0px 42px 0px 38px; }
.ContentBottomLeft { background: url(images/contentbottomleft.png) top left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
.ContentBottomRight { background: url(images/contentbottomright.png) top right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
.ContentBottomCenter1 { background: url(images/contentbottom.png) top left repeat-x; height: 47px; }
.ContentBottomCenter2 { background: url(images/contentshadow.png) top left repeat-x; height: 5px; }
</style>
<!--[if lt IE 7]>
<style>
.ContentTopLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopleft.png', sizingMethod='scale'); }
.ContentTopRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopright.png', sizingMethod='scale'); }
.ContentRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentright.png', sizingMethod='scale'); height: expression(this.parentNode.clientHeight + 'px'); }
.ContentBottomLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomleft.png', sizingMethod='scale'); }
.ContentBottomRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomright.png', sizingMethod='scale'); }
.ContentBottomCenter2 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentshadow.png', sizingMethod='scale'); overflow: hidden; }
</style>
<![endif]-->
Happy Coding!