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

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.

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;  
}