CSS curve border in IE not working

Question

Curve border is working on Firefox ,Google Chrome but not working on IE?any idea how to do make it work ?

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

Just in case: There's no native support for `border-radius` until IE9. Here's something that can help for older versions: http://css3pie.com/ — Wesley Murch, May 31 '11 at 07:43
`-moz` denotes a Mozilla (Firefox) specific property and `-webkit` denotes a Webkit (Safari, et al) specific property, neither of which are supported by IE. — Jared Farrish, May 31 '11 at 07:44
Ah.. kids these days growing up with their fancy pants browsers... Back in the day we had to do this with images and lots of tables. ;) — Damien, May 31 '11 at 10:15

isNaN1247 · Accepted Answer · 2011-05-31T08:49:17.480

Unfortunately IE6-IE8 do not support rounded borders. Instead you would need to use something like CSS3PIE.

IE9 however DOES understand border-radius

Update further to comment that it 'won't work' - here is a quick step-by-step (this is a very simple, high-level sample.

Download CSS3PIE at http://css3pie.com/download-latest
Save the .htc file in the root of your site
Lets say you have a div with the id of foo:
```
<div id="foo">Hello, I'm rounded</div>
```

Your CSS for this could be:

#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
       -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
       border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  }

You simply need to add one more rule to the bottom of that CSS, as follows behavior: url(/PIE.htc);

This will cause CSS3 to apply your border-radius rules to IE6-8.

just one more thing when i try to specify using wich border by adding " border-top-left-radius" it doesn't curve it — , May 31 '11 at 09:14
@sally - this syntax won't work with CSS3PIE - see this forum post http://css3pie.com/forum/viewtopic.php?f=3&t=136 - basically you can do it with a short-hand version instead (border-radius: 0 5px 0 0; (top-left, top-right, bottom-right, bottom-left)) — isNaN1247, May 31 '11 at 10:13

score 3 · Answer 2 · edited May 23 '17 at 12:12

3

It will only work in IE9, and you have to use the CSS3 standard.

Support for "border-radius" in IE

-moz and -webkit won't work in IE ever, since they are for other render engines.

edited May 23 '17 at 12:12

Community

1
1

answered May 31 '11 at 07:45

aorcsik

15,271
5
39
49

score 0 · Answer 3 · answered Jul 09 '13 at 05:53

use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....only border-radius property work in ....

background-color: #E8EDEF;
    border-radius: 10px 10px 10px 10px;
    display: block;
    margin-left: 78px;
    width: 591px;
behavior: url(pie/PIE.htc);

border-radius-bottom right*/ not working in ie6-8

CSS curve border in IE not working

3 Answers3