CSS div rounded corners

Question

I'm attempting to do the following...

Here's what I've got right now.. but it's not rendering correctly. Does anyone have any idea as to how I'd fix this?

CSS

    /* Curved Corners */
    .bl {
background: url(bl.gif) 0 100% no-repeat;
/*background-color:#EFFBEF;*/
width: 700px;
margin-left: auto ;
margin-right: auto ;}
    .br {
background: url(br.gif) 100% 100% no-repeat;
}
    .tl {
background: url(tl.gif) 0 0 no-repeat;
}
    .tr {
background: url(tr.gif) 100% 0 no-repeat;
}
    .clear {font-size: 1px; height: 1px}

HTML

    <div class="bl"><div class="br"><div class="tl"><div class="tr">

        <div id="header">

    </div>

    <div id="footer">

    </div>

        </div></div></div></div>

Answer 1

Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to 'flash' upon page load.

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 -khtml-border-radius: 10px;
 border-radius: 10px;

This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com

In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.

To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.

Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.

Answer 2

There's always curvycorners as well, it uses native css for speed if the browser supports it or falls back to javascript if the browser doesn't.

Answer 3

Can be done easily with jQuery rounded corners rounded_corner

 $(document).ready(function(){
   $("#b1").corner();
 });

You don't need to worry about cross browser issues with jQuery approach.