Ie9 Border-Radius

Support for border-radius in IE

Yes! When IE9 is released in Jan 2011.

Let's say you want an even 15px on all four sides:

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

ie9 border radius

Have you got this at the top of your HTML document (Above the <html> tag)

<!DOCTYPE html>

IE9 requires this for the website to display the new HTML5 / CSS3 things

Edit: Or many other Doctype's (XHTML etc, but this is the shortest and easiest to remember)

IE9 border-radius

Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag.

Detail explanation here Investigating Document Mode Issues

Which border radius property will work in IE9?

IE9 will support border-radius see: http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/Default.html

Border Radius Not WORKING in IE9

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

IE9 border-radius

Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag.

Detail explanation here Investigating Document Mode Issues

CSS3 Border-Radius and IE9

It has nothing to do with your SVG image or its data URI, but it has to do with your filter. Effects generated by the filter property, which you're using, do not get clipped by border-radius, and often overlap certain other things such as background images.

Whether this is a real bug or an unintended side effect, I don't know, but that's the cause in IE9, as it doesn't implement CSS3 gradients — only IE10 does.

Since you're using an SVG image anyway, you can easily fall back to that instead of using filter.

Ie9 Border-Radius

Support for border-radius in IE

ie9 border radius

IE9 border-radius

Which border radius property will work in IE9?

Border Radius Not WORKING in IE9

IE9 border-radius

CSS3 Border-Radius and IE9

Related Topics

Leave a reply