163

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

Inkbug
  • 1,682
  • 1
  • 10
  • 26
Tony the Pony
  • 40,327
  • 71
  • 187
  • 281

11 Answers11

225

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.

Bryan Legend
  • 6,790
  • 1
  • 59
  • 60
Kevin Florida
  • 6,659
  • 3
  • 23
  • 20
  • 7
    Presumably if you're not using the X-UA-Compatible meta tag you don't need to add it just to make it work in IE9? – thepeer Sep 30 '10 at 16:06
  • 74
    You should be putting the vendor prefix versions FIRST and the standard LAST so that if the browser supports the actual standard then it will use that instead of it's vendor prefixed version. – Jason Berry Oct 08 '10 at 05:56
  • 4
    Correct you don't need the meta tag.. you only need to replace the ie7 emulator if it is included. Otherwise, don't worry about it. – Kevin Florida Oct 12 '10 at 14:20
  • Strange. I can only get it to work in IE9 Beta by explicitly including . I've checked that there are no other X-UA-Compatible headers coming down so it isn't that it's overriding anything. Anyway, just glad I can get it working. :) – stucampbell Nov 15 '10 at 11:53
  • Keep in mind ie9 beta is beta.. but also make sure that compatibility mode is turned off in your browser. If you want to be sure that folks see the page you want to see it, it is a good idea to emulate ie9 with that tag. I do on all my sites. – Kevin Florida Nov 23 '10 at 15:41
  • 3
    FYI in the current IE9 beta 'border-radius' works properly using a single value. All four values are not required unless you actually want them to be different. – mikemaccana Dec 03 '10 at 23:58
  • "IE=Edge,chrome=1" is probably the best XUAC setting as it will force IE to use the best engine it has available, including Chrome Frame (if installed). – Jason Weathered Dec 08 '10 at 22:06
  • I can't believe IE9 needs this to get CSS3 to work properly, shame. Use this instead: ...Thanks for posting the answer :D – Nasir Jan 24 '11 at 12:36
  • IE9 doesn't need the meta tag to work, my point was that it won't work if you are emulating IE7, IE8 or others.. In fact, in both .net and php I detect the version of IE then emulate the latest version.. this way the end-user isn't destroying my Website with compatibility mode. – Kevin Florida Feb 11 '11 at 22:21
  • 2
    @nailer: Thanks for updating the corners.. The first alpha vs and beta vs of IE9 required all 4 corners declared. I just downloaded the latest ie9 RC and it is letting me declare one value.. Not sure when that changed.. – Kevin Florida Feb 11 '11 at 22:26
  • 1
    Also, -moz- and -webkit- are no longer needed in the current versions of those browsers! – Bryan Legend Sep 23 '11 at 20:31
  • 1
    @Lone Coder, you are correct, however many organizations refuse to upgrade Firfox from 3.6, so if you want to guarantee maximum compatibility, it is a good idea to include it. – Kevin Florida Sep 24 '11 at 23:34
  • 2
    Border radius does not work when a filter is applied (css3 gradients) in my experience. – svandragt Feb 28 '12 at 12:35
  • @svandragt - When using a filter, it "overflows" past the border-radius. CSS3 gradients, however, are contained. – allicarn Oct 19 '12 at 14:30
47

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

David Johnstone
  • 24,300
  • 14
  • 68
  • 71
28

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

Luis Melgratti
  • 11,881
  • 3
  • 30
  • 32
18

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.

Tim
  • 304
  • 1
  • 14
Peter G
  • 423
  • 6
  • 14
14

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

AlBlue
  • 23,254
  • 14
  • 71
  • 91
Ben S
  • 68,394
  • 30
  • 171
  • 212
9

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

JAVAC
  • 1,230
  • 3
  • 17
  • 38
6

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

simonrjones
  • 1,182
  • 7
  • 11
5

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

Iago Bruno
  • 702
  • 1
  • 7
  • 15
2

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

Allan Starr
  • 41
  • 4
2

The corner radius issue of IE gonna solve.

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

jaya
  • 21
  • 1
2

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

SigmaBetaTooth
  • 2,084
  • 2
  • 13
  • 8
  • IE10 will support proper CSS3 gradients (the current IE10 developer preview already does via -ms-linear-gradient). If you want gradients that honor border-radius in IE9, you need to use SVG (either an external SVG file or one that's encoded in a data URI) - see http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/ -- also CSS3 PIE will soon automate this, there is a [testing build available](http://css3pie.com/forum/viewtopic.php?f=4&t=933&p=2780) – lojjic Jun 24 '11 at 15:29
  • A quick fix is to wrap it in another element. Give the parent element the same border-radius and set its overflow to hidden. – Senne Nov 17 '11 at 09:37