9

Does anybody have an idea on how to "fix" the rendering in IE 9 and 10 of a combination of box-shadow and border-radius?

It's especially noticeable when using inset shadows. The radius of the shadow is very different in IE compared to webkit/gecko...

In this image you can see the problem. On the left is a button with an inset box-shadow, on the right without box-shadow. (don't mind the different font-rendering)

enter image description here

Here's the code used: http://dabblet.com/gist/5450815

2
  • 1
    Great question. Browsing through the W3 specs, I'm not sure which user agent has it right (or if this behavior is defined). I couldn't find any specifics from WHATWG (which often goes deep into browser implementation). It seems that the inner radius of the box shadow takes the outer radius of the border, so something like this actually matches up correctly. However, when there is no border, this inference of an outer width leads to the undesirable results you are seeing. I couldn't find a workaround.
    – Tim M.
    May 1, 2013 at 20:42
  • 3
    Chrome, Firefox and Opera all correctly interpret inset browser widths as being relative to the displayed space on the interior of the element. While IE never bothers to make the distinction between interior and exterior space and always uses the curvature of the outside border. Check it out here: dabblet.com/gist/5503928 IE's inset box shadow matches the curvature perfectly of a 10px outer border. The rest don't simple invert the border style, they recalculate it based on the bounds of the element. IE's implementation is wrong, and seems lazy if we're being honest. May 2, 2013 at 17:41

5 Answers 5

3
+50

The problem only occurs when the spread of the inset shadow triggers a larger "shadow-radius" than the size of the border-radius in IE. Set the border-radius to 50px in your example and it looks the same in IE and Chrome.

If you need a bigger box-shadow spread then you can just use a border instead, at least in your examples that would do the trick. Example: http://dabblet.com/gist/5501799

Another problem you might see is that IE and Chrome render the blur of the box-shadow totally different, but I assume you're not using it in your example for that reason...

2
  • 1
    not ideal, but best solution i guess. Problem is the border has to animate on hover, so the button will jump a little :/
    – ThomasM
    May 7, 2013 at 7:55
  • I just tried animating a border and padding at the same time: seems jumpy indeed: jsfiddle.net/w1ll3m/TkpQm. Maybe box-sizing: border-box; can help you somehow by fixing the total width of the button.
    – Willem
    May 7, 2013 at 8:39
3

A quick (semi dirty) solution, which I have tried and works, is a div inside a div. Let me know if this does it.

HTML CODE:

</head>
<body>
 <div class="box"><div class="box-inside"></div></div>
 </body>
</html>

CSS CODE:

.box {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #000;
width: 200px;
height: 100px;
background: #000;
}
.box-inside {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #fff;
width: 175px;
height: 75px;
position: relative;
top: 12%;
left: 6%;
background: #fff;
}

My jsfiddle

1
2

Try this, add this role:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');
1

You can safely use inset box shadows to emulate borders in modern browsers, but IE mis-renders the radius. You can work around this by letting IE fall back to the default "outset" style.

.Button {
  color: #0ac;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #0ac;
}

/* IE media query hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .Button {
    box-shadow: 0 0 0 2px #0ac;
  }
}
-4

Try this: //CSS

.box {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;

    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;

    width: 200px;
    height: 100px;
}

For IE8 you have to include CSS3 pie(pie.htc) file then it will work on IE8.

You can download from here: http://css3pie.com/

3
  • the problem is not that it doesn't render. It just doesn't render correctly.
    – ThomasM
    Apr 24, 2013 at 11:41
  • Have you added above CSS? It will work add the below CSS .box { border:5px solid #000; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; -moz-box-shadow: inset 0 0 10px #000; -webkit-box-shadow: inset 0 0 10px #000; box-shadow: inset 0 0 10px #000; width: 200px; height: 100px; } jsfiddle.net/WcLKr Apr 24, 2013 at 13:50
  • 2
    like i said, that is not the problem. Notice the extra 0 in the statement: inset 0 0 0 10px #000. Now test that in IE8 en IE9, it gives an ugly rendering compared to webkit/gecko.
    – ThomasM
    Apr 24, 2013 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.