Cross-browser curved borders

Question

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

Answer 1

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

Answer 2

您可以将JQuery Curvy Corners用于开箱即用。

Answer 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.

Answer 4

Download the .htc file:

• http://curved-corner.googlecode.com/files/border-radius.htc

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).

Answer 5

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>

Answer 6

如果你有兴趣在IE中获得圆角，这可能是有用的 - http://css3pie.com/

Answer 7

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/