8

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>
Ben
  • 54,723
  • 49
  • 178
  • 224
Skizit
  • 43,506
  • 91
  • 209
  • 269

5 Answers5

20

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.

Sandwich
  • 2,304
  • 3
  • 24
  • 30
  • I was under the impression IE8 doesn't support this. – Skizit Dec 31 '10 at 02:37
  • 2
    This is true, but the following solves that problem well (in IE6, 7 and 8!) info: http://code.google.com/p/ms-border-radius/wiki/Usage and source: http://code.google.com/p/ms-border-radius/source/checkout – Sandwich Dec 31 '10 at 02:41
  • 1
    msbr looks broken, it throws an exception in IE8 as soon as the script is loaded. It seems to work despite that, but I don't like seeing errors in the status bar. – Pawel Krakowiak Feb 23 '11 at 13:24
  • What's the error? May be an easy fix, the script is simple enough. – Sandwich Feb 28 '11 at 00:04
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.

David Hewitt
  • 829
  • 4
  • 13
2

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.

A_Var
  • 1,056
  • 1
  • 13
  • 23
1

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/

Ben
  • 54,723
  • 49
  • 178
  • 224
0

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;
vikram
  • 1