I have not been able to apply a border-image at the same time as a background image in IE8 and IE9.

I'm using Beta5 right now.

My image is a 50px X 50px PNG image, with a 2px border all the way around and a transparent center.

We conditionally include an IE only stylesheet.

My regular CSS (all browsers) is as follows:

.BorderContainer
{
background: #e2e3e3 url("/path/bg_Container.png") repeat-x left top !important;

-moz-border-image: url('/path/bg_2ColorBorderImage.png') 2 2 2 2 repeat repeat;
-webkit-border-image: url('/path/bg_2ColorBorderImage.png'') 2 2 2 2 repeat repeat;
border-image: url('/path/bg_2ColorBorderImage.png'') 2 2 2 2 repeat repeat;
}

My IE only CSS (included only if IE is the browser) is as follows:

.BorderContainer
{
border-image: url('/path/bg_2ColorBorderImage.png') 2 2 2 2 repeat repeat;
behavior: url('/path/pie.htc');
position: relative;
}

What I've noticed is that in the latest FF (7.0.1)/Chrome 14 this method works. The image border is a little fuzzy (I specified 2px for every dimension and it makes it 3px everywhere, I'm assuming it's in the implementation.

In IE8 and IE9, the background property is used and the border-image property seems to be ignored.

As soon as I comment out the background property, then I see the border-image in IE.

Is this a bug? Or am I applying things incorrectly?

I suspect it's your use of !important in your background property. PIE has to be able to modify the background of the element... for IE6-8 it has to set it to transparent so it can re-render the border-image behind the element, and in IE9 it has to be able to add the border-image as a layer in the background. If you set !important on your background, then PIE is unable to override it.

Here's a screenshot of IE8 rendering a border-image with a background, so this does work.
http://cl.ly/3m1E3b353L3X1M14193d

Also be aware that in IE6-8 only the 'stretch' value is supported, you cannot use 'repeat'. IE9 will do 'repeat' correctly.

Interesting I'll try that in an isolated solution for proof of concept purposes.

I had the !important flag on that rule because our CSS file is being applied before the included CSS with a particular plugin so the order matters in our case and in order to supercede this file, an important flag needed to be added.

Does anyone know if this difference is planned on being addressed, or is the way our system is currently not compatible with how border-image with a background has been implemented in CSS3Pie?

Using !important will always be a problem, because there is no way that PIE can override it. If PIE can't override it, then it can't render.

An alternative to !important might be to change the selector to increase its specificity above that of the plugin CSS.