11

What is the best way to achieve cross-browser(ff,ie>6,chrome,opera,safari) curved corners on a div. I found this article http://jonraasch.com/blog/css-rounded-corners-in-all-browsers and I've followed instructions step by step multiple times, here is my css :

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

<!--[if lte IE 8]>
<style>
#content_wrapper{
behavior: url(template/css/border-radius.htc);
border-radius: 20px;
}
</style>
<![endif]-->

Can somebody point me what am I doing wrong or is there a better way to achieve the same effect, its working in all browsers except in IE

Gandalf StormCrow
  • 25,788
  • 70
  • 174
  • 263

7 Answers7

17

If that's an unmodified snippet from your HTML file, it's clear why it doesn't work: You're using a <style> tag within another <style>.

As a first test, just try replacing your entire snippet with (remove the IE specific block!):

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    behavior: url(template/css/border-radius.htc);
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

If that works, you can move the IE specific parts into a separate <style>:

<style type="text/css">
#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}
</style>


<!--[if lte IE 8]>
<style type="text/css">
#content_wrapper{
    behavior: url(template/css/border-radius.htc);
    border-radius: 20px;
}
</style>
<![endif]-->

If you still have problems, try the example zip file from the google website: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

Chris Lercher
  • 37,264
  • 20
  • 99
  • 131
8

You could put JQuery Curvy Corners to use to do it all out of the box instead.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • 2
    Sure, use JavaScript for styling purposes... what a terrible piece of advice. – Seb May 20 '10 at 00:36
  • @Seb: If there was a better cross-browser solution, this would not have existed in the first place. – Sarfraz May 20 '10 at 06:06
  • @Sarfaz do you know how many JS solutions are out there for things not requiring it? The fact that it exists doesn't mean there's not a better solution. In fact, look at the correct solution in this question. – Seb May 20 '10 at 14:27
3

A citation from the article you mentioned:

The path to border-radius.htc works differently than you may expect—unlike background-image paths which are relative to the stylesheet, this path is relative to the page from which you call the CSS.

That’s why it’s a good idea to avoid relative paths like we did above.

Community
  • 1
  • 1
newtover
  • 31,286
  • 11
  • 84
  • 89
2

Download the .htc file:

and put that inside the folder ./template/css. See the http://code.google.com/p/curved-corner/ project for detail (as linked from the article you've placed).

kennytm
  • 510,854
  • 105
  • 1,084
  • 1,005
1

Here is the css:

.curved {

 -moz-border-radius:10px;

 -webkit-border-radius:10px;

 behavior:url(border-radius.htc);

}

And here is how you would use it, of course:

<div class="curved">Curvd div</div>
jessecurry
  • 22,068
  • 8
  • 52
  • 44
1

If you interested in getting rounded corners in IE, this may be of use - http://css3pie.com/

Sniffer
  • 6,242
  • 10
  • 45
  • 53
0

hello i am going to just be lazy and paste a link to someone elses work.... I dont want the bounty

try this one. http://dillerdesign.com/experiment/DD_roundies/

Kieran
  • 17,572
  • 7
  • 45
  • 53