[Solved] Support for “border-radius” in IE

Does anyone know if/when Internet Explorer will support the “border-radius” CSS attribute?

Solution #1:

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.

Respondent: Kevin Florida

Solution #2:

The answer to this question has changed since it was asked a year ago. (This question is currently one of the top results for Googling “border-radius ie”.)

IE9 will support border-radius.

There is a platform preview available which supports border-radius. You will need Windows Vista or Windows 7 to run the preview (and IE9 when it is released).

Respondent: David Johnstone

Solution #3:

While you’re waiting.. Curved corner (border-radius) cross browser

Respondent: Luis Melgratti

Solution #4:

A workaround and a handy tool:

CSS3Pie uses .htc files and the behavior property to implement CSS3 into IE 6 – 8.

Modernizr is a bit of javascript that will put classes on your html element, allowing you to serve different style definitions to different browsers based on their capabilities.

Obviously, these both add more overhead, but with IE9 due to only run on Vista/7 we might be stuck for quite awhile. As of August 2010 Windows XP still accounts for 48% of web client OSes.

Respondent: Peter G

Solution #5:

It is not planned for IE8. See the CSS Compatibility page.

Beyond that no plans have been released. Rumors exist that IE8 will be the last version for Windows XP

Respondent: Ben S

Solution #6:

<!DOCTYPE html> without this tag border-radius doesn’t works in IE9, no need of meta tags.

Respondent: JAVAC

Solution #7:

Quick update to this question, IE9 will support border-radius according to: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

Respondent: simonrjones

Solution #8:

Use -ms-border-radius: 15px, any element that uses css -ms- is compatible with IE.

Respondent: Iago Bruno

Solution #9:

The corner radius issue of IE gonna solve.

http://kbala.com/ie-9-supports-corner-radius/

Respondent: jaya

Solution #10:

What about support for border radius AND background gradient. Yes IE9 is to support them both seperately but if you mix the two the gradient bleeds out of the rounded corner. Below is a link to a poor example but i have seen it in my own testing as well. Should of taken a screen shot 🙁

Maybe the real question is when will IE support CSS standards without MS-FILTER proprietary hacks.

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

Respondent: SigmaBetaTooth

Solution #11:

SOLVED – not rendering border radius correctly in IE 10 and 11

For those not getting the
-ms-border-radius: or the border-radius: to work in IE 10,11
And it renders all square then follow these steps:

  1. Click on the gear wheel at the top right of the IE browser
  2. Click on Compatibility view settings
  3. Now uncheck the 2 boxes that are checked by default.

Ensure that the boxes are unchecked as in pic

Respondent: Allan Starr

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.