border-image: workaround for IE - css

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.

Answer 2

The only real solution might be to make your corners or sides images. Its looks as though everything is the same size just has an expandable width. so it should be farely easy to code with almost no lag time for load.
This is why I stick the the concept of using what is proven available. Meaning, if your target market is using IE7+ you should be conscious while designing and programming, so you dont run into small problems like this.
All this CSS3 and HTML5 is awesome stuff but we, as developers, are still limited to what everyone see's. If you want to have an even playing field for all users, then you can rely on new coding practices until you can do things, like border-radius, across the board in all browsers.
On the flip side, you might just not care about what IE users see; therefore you can just have the different style as a browser enhancement, for people who use the other browsers.

Answer 3

Take a really wide image of that red gradient with the proper 4 corner cutouts, save it as an image (transparent PNG on corners since you are not supporting IE6).
For each of those header areas you will wrap it like so:
<div class="outer"><div class="inner">ENQUETE</div></div>
You set this image as background on both of those elements, offset one of them so you can get the image endcaps on both beginning and end. Adjust the spacing/shift until you are clear on both round segments.
.outer {
background: transparent url(redgradient.png) no-repeat 0px 0px;
margin: 0 10px 0 0;
}
.inner {
background: transparent url(redgradient.png) no-repeat 100% 0px;
position: relative;
left: 10px;
}

Answer 4

Hit the exact same issue and gave IE<=9 via conditional comments a fall-back. However, this solution is now broken with the latest IE10 prev4 still not supporting border-image and also does not support IE conditional comments. Back to the drawing board...
Working on the solution we should really use: feature testing.
Using Modernizr which adds CSS3 class names to html tag and testing for border-image (do things the web standards way) or no-border-image (give IE users the best you can do but not the same experience as compliant browsers and display an IE visible only link to your page that tells them how to get a better experience: drop IE for example).

Answer 5

No, but the ie-css3.htc thing may be the only possible work around if that's the one I'm thinking of. Or was there another js script I'm thinking of that solved this? Can't remember.