border-image transparency bug in IE11

Question

I'm using the border-image property on elements with an image file set as the border background. The border image file has transparency and it works as I want it in Chrome and Firefox.

However, in IE11, the transparent area "overwrites" the background image under the border. Is there a way to fix it? I'm using the same border image on elements with various background images so I'd rather not create separate non-transparent border images for each one.

This is what I have so far:

body {
background: #000;  
}

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
  width: 300px;
  height: 80px;
  border-style: solid;
  border-width: 14px;
  border-radius: 5px;
}

<div></div>

Rendering comparison

border-image file:

background-image file:

Answer 1

Defining a border-image-width instead of border-width solves the issue in IE11. If you want to set a fallback, border-style: dashed seems to offer more consistent behaviour.

This seems like buggy behaviour but is maybe a simple difference in browser behaviour:

• In Chrome, the border-width: 14px adds 14px each side and occurs without a border-style. The border-style has no affect when border-image-width is set.

• In IE11, the border-width: 14px does not add 14px each side unless a border-style is set. The border-style does affect the positioning of the border-image, but only when set to solid.

Screenshot from IE11

Working Example

div {
  background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
  border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;  
  border-image-width: 14px;
  width: 300px;
  height: 80px;
  border-radius: 5px;
}

<div></div>