border-image: workaround for IE

Question

Is there any workaround for IE which makes me able to use border-image? I\'m developing a site and it\'s working properly in every browser but IE. I need to mim

Answer 1

The .png files are unnecessary. Just use CSS3 pie: http://css3pie.com/

Get rid of the proprietary IE filter entirely, and use (heh, the proprietary) -pie-background:linear-gradient(values) instead.

Works harmoniously with individually rounded corners: border-radius: 0 5px 5px 5px

In that case, the top-left corner would be no border-radius, and the other corners (clockwise) would be at 5px each.

Then use behavior:url(path_to/pie.htc); in the same style.

Remember also that the path_to is relative to the document being viewed, not the CSS file that calls it. Make sure to check that if it doesn't work right off the bat.

I've tested this plenty of times and it works like a charm.

Additional information:

If sometimes your styling appears and vanishes, try giving your element a position:relative and a specified z-index. The way CSS3 PIE works, it plays with the z-index and can make your styled gradients (and rounded corners, etc.) appear underneath the background if not specified, particularly if you use negative margins or something odd like that.