From Microsoft Blog and html5please:
Internet Explorer 10 doesn’t include support for CSS border-image. To preserve the layout of your page, a best practice is to specify a solid border-style fallback so border widths, padding, and margin are preserved. (If IE doesn’t find a supported border type, it will discard those values.) For example:
Before:
padding: 8px 0 8px;
-webkit-border-image: url(border.png) 5 5 5 5 repeat repeat;
border-width: 5px;
After:
border-style: solid;
border-color: #fff;
padding: 8px 0 8px;
-webkit-border-image: url(border.png) 5 5 5 5 repeat repeat;
border-width: 5px;
From stackoverflow:
IE10 doesn't completely remove support for HTC behaviors. You can still use them if you force IE10 to emulate IE9, which you can do by adding the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
This would let you use CSS3 PIE's HTC behaviors again, but it would also prevent you from using other new features introduced in IE10. It's a tradeoff, but one that would allow your site to appear as intended in IE10 until such time as a better border-image polyfill is available.
Another variation is here. IE 10 still disables htc in emulation mode as well.
See this post. Possible to create an alternate version of PIE's IE 10 code to handle the border-image issue.
Ug, what a nasty situation. So up till the CSS border images were added, everything was looking great in IE 10. So option #2 seems like a no go. If option #3 works, that might be cool? But if not, I saw we just make them transparent in IE 10?