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 mimic these bars

I could use the ie-css3.htc hack but border-radius works only with the four corners together (which doesn't apply here, 'cause the top border isn't rounded) and the filter css property (for gradient) doesn't work with border-radius at all (it fills the whole element ignoring the border radius limits). In case there's no workaround for this, how would be the best way for doing this?

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.