Border-Radius Doesn't Work on Ie10

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.

Border-radius causes weird behaviour in IE9, IE10 and IE11

Here is what I think is happening.

Browser vendors seem to have decided that fixed position elements that overflow have clipping turned off, e.g. they are not clipped by their parents. This makes things consistent, since fixed elements are positioned relative to the window, not the parent. If clipping was applied, it would have position/width relative to the window and clipping relative to the parent. It would visually look like this (except the bottom corners should be rounded--more on that below).

So: fixed element, no overflow clipping. Check.

But something changed in IE9. They introduced support for rounded corners. Now to what I said about the rounded clipping. IE9 actually did this right. Many browsers right now will clip with square corners, even when the element has rounded corners. This is bad. Apparently, IE9 fixed this by detecting the presence of rounded corners, and in such cases, re-drawing the clipping. When it does that, it makes two mistakes.

1. It applies the clipping--undoing the "fixed element, no
   overflow clipping" rule. Clipping is turned back on, and the element
   is now clipped by the width of the parent.

2. The clipping is just put directly on the element,
   un-centered, with no regards to the fact that the clipping is
   supposed to be from the parent. It's just clipped starting at 0,0
   out to the designated width and height--that's why the green element
   appears left aligned--the right/bottom 50px are hidden.

Fixes?

• Don't nest fixed inside absolute. (Best solution--avoid weird edge-cases in the future)
• Give the parent (red) div a width.
• Nest a new div directly inside .root and move the overflow:hidden to it. Fiddle example. (Least intrusive)

CSS3 Rounded Corners are not working in IE quirks mode

Quirks mode do not support CSS3, and CSS behaviors were disabled in IE10. You can set header to IE=edge and forget about Quirks mode.

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

Look at http://border-radius.com/.

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

Why is border radius not showing up in IE?

The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.

Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.

---

Stylistic notes (unrelated to the problem):

border-radius: 0 12px 12px 0; means the same thing as

border-top-right-radius:12px;
border-bottom-right-radius:12px;

but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.

The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.

---

Related Topics