CODEWITHSUNDEEP
javascripthtmlcss
Gandalf StormCrow
Gandalf StormCrow

Reputation: 26212

Cross-browser curved borders

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

Upvotes: 11

Views: 1960

Answers (7)

Sniffer
Sniffer

Reputation: 6412

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

Upvotes: 1

jessecurry
jessecurry

Reputation: 22116

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>

Upvotes: 1

Kieran
Kieran

Reputation: 18059

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/

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382841

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

Upvotes: 8

newtover
newtover

Reputation: 32094

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.

Upvotes: 3

Chris Lercher
Chris Lercher

Reputation: 37778

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

Upvotes: 17

kennytm
kennytm

Reputation: 523614

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

Upvotes: 2

Related Questions