CSS div圆角

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

总有一些曲线 ，如果浏览器支持它，它会使用原生css来提高速度，如果浏览器不支持，则使用javascript。

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.

Answer 4

A fantastic summary for all major browsers, telling you how to round each corner or all corners:

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

Answer 5

Instead just put this code in the class where you want to have rounded corners .it will definitely work.

-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;