CODEWITHSUNDEEP
htmlcss
user1389602
user1389602

Reputation:

Border Radius Not WORKING in IE9

Border Radius is not working in IE9. The following Attribute i used in my project. and also i add the .HTC file also

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(Styles/border-radius.htc);

Upvotes: 0

Views: 22444

Answers (10)

Shivayan
Shivayan

Reputation: 136

No matter what you include or what you write border-radius doesn't work in ie9. Changing the browser mode or document mode is never a solution because that it is on the client side. So i am afraid my friend there is no plausible way to make border-radius work properly in ie9 unless you take the help of javascript.

Upvotes: 0

belkin
belkin

Reputation: 1

If you use at the same time border-radius with filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='######', endColorstr='######',GradientType=0 ), just comment this filter.

Upvotes: 0

Ags1
Ags1

Reputation: 659

This is an old thread, but it did not help me. My solution was to add the HTML 5 doctype declaration to the page:

<!DOCTYPE html>

Other HTML doctype declarations may work too - my problem was I was generating the pages with no doctype declaration at all.

Upvotes: 3

Ballu Rocks
Ballu Rocks

Reputation: 1226

Use 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Upvotes: 4

Gaurav Agrawal
Gaurav Agrawal

Reputation: 4431

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

Furthermore: don't forget to declare your IE coding is ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.

Upvotes: 5

CSS Guy
CSS Guy

Reputation: 1984

border radius supported ie-7, ie-8, ie-9 via javascript check this tutorial how to show border radius in ie http://davidwalsh.name/css-rounded-corners

Upvotes: 0

Undefined
Undefined

Reputation: 11431

This answer will also help with lower versions of ie, like ie6,7,8.

Using CSS Pie -> http://css3pie.com/

This will allow you to specify your border radius normally and then include the pie.htc script in your css. This magically make it work in IE6. Look at that!

This also works with other CSS3 properties like background gradients.

You can also try adding this to your head ->

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Good luck!

Upvotes: 0

mborecki
mborecki

Reputation: 162

in IE9 border-radius works without any behavior files.

Upvotes: 0

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

border-radius.htc broke normal border-radius in ie9, include border-radius.htc file in ie versions below 9 with conditional comments

Upvotes: 0

dockeryZ
dockeryZ

Reputation: 3981

You need to put this in your HTML header

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer discovered here ie9 border radius

Upvotes: 2

Related Questions