Border-image: workaround for IE

Question

Is there a workaround for IE that allows me to use border-image ? I am developing a website and it works correctly in every browser but IE. I need to simulate these columns

I could use ie-css3.htc hack, but border-radius only works with four corners together (which does not apply here because the upper border is not rounded), and the filter css property (for gradient) does not work with border-radius (it fills the entire element, ignoring the borders of the border radius). If there is no workaround for this, what would be the best way to do this?

Answer 1

.png files are not needed. Just use CSS3 pie: http://css3pie.com/

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

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

In this case, the upper left corner will not have a border radius, and the remaining corners (clockwise) will have a value of 5 pixels each.

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

Remember also that the_to path refers to the document in question, not the CSS file that calls it. Be sure to check if it is working right off the bat.

I have tested this many times and it works like a charm.

Additional Information:

If sometimes your style appears and disappears, try specifying your element a position:relative and the specified z-index . How CSS3 PIE works, it plays with a z-index and can cause your stylized gradients (and rounded corners, etc.) to appear under the background if not specified, especially if you use negative margins or something strange.

Answer 2

Take a very wide image of this red gradient with the corresponding 4 corner cutouts, save it as an image (transparent PNG at the corners, since you do not support IE6).

For each of these header areas, you wrap it like this:

 <div class="outer"><div class="inner">ENQUETE</div></div> 

You set this image as a background on both of these elements, shift one of them so that you can get the final frames of the image both at the beginning and at the end. Adjust the distance / shift until you clear 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 3

The only real solution would be to create images of your corners or sides. It seems that all the same sizes have an expandable width. therefore, it should be easily programmed with a minimum load delay time.

That's why I stick to the concept of using what is proven. The point is, if your target market uses IE7 +, you must be conscious in developing and programming, so you do not encounter such small problems.

All of these CSS3 and HTML5 are awesome things, but we, as developers, are still limited by what everyone sees. If you want to have an even playing field for all users, then you can rely on new coding methods until you can do something, for example, the radius of the border, in all browsers.

On the other hand, you may simply not care about what IE users see; so you can just have a different style as a browser extension for people who use other browsers.

Answer 4

No, but the thing ie-css3.htc may be the only possible job if that is what I am thinking about. Or was there another js script I think this solved it? I can’t remember.

Answer 5

Hit the same problem and gave IE <= 9 via conditional comments. However, this solution is now broken with the latest IE10 prev4, which still does not support the border image, and also does not support IE conditional comments. Back to the drawing board ...

Work on a solution that we should really use: function testing.

Using Modernizr, which adds CSS3 class names to the html tag and testing for a borderline image (something like web standards) or a borderless image (give IE users the best you can do, but not the same as compatible browsers and render IE , visible only to a link to your page that tells them how to get the best experience: for example, drop IE).