CSS div rounded corners

Question

I am trying to do the following ...

Here is what I have right now, but that’s not right. Does anyone know how I can 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, which, as you know, causes any rounded element to “blink” when the page loads.

  -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 useful: http://borderradius.com/ , and there is another http://css3generator.com

In the latest versions of most (if not all) browsers border-radius: 10px; It works just fine, and on time, specific browser ads will be outdated.

To make the border radius in IE6, 7 and 8, try ms-border-radius js library , although I have not tested it (and someone replied that it does not work). My personal opinion is that if someone still uses these browsers, the Internet should look like a strange and scary place for them every day, they will not miss their rounded corners.

In addition: the method you are trying to use is more applicable when CSS3 is not widely supported. It was created during a strange period in the Internet when the popularity of IE6 prompted countless web developers to find very non-semantic creative solutions to other simple problems. So thanks to Internet Explorer for taking several years of our lives and slowing down web design and development.

Answer 2

Always curvycorners , it uses its own css for speed if the browser supports it or returns to javascript if the browser doesn’t work.

Answer 3

Can easily be done with jQuery rounded_corner rounded corners

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

You don’t need to worry about cross-browser issues with the jQuery approach.

Answer 4

A fantastic summary for all major browsers telling you how to go around every 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. This will definitely work.

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