Border-Image: Workaround for Ie

border-image: workaround for IE

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.

Workaround for border-image IE 8 & IE 7

The problem that you're going to have with this background image as a single image is that the glare on the face of the iPad prevents any part of it from repeating. I've created a similar effect to what you might be looking for using the css and images in this fiddle:

https://jsfiddle.net/fordareh/1jzgk34f/

The trick is to isolate the top and bottom corners so that they don't expand since that would distort them. Then, you scale the middle slice so that it joins up nicely to the glare (with a filter hack that should work just fine in

HTML:

<div class="top">
  <div class="bottom">
    <div class="middle">
      <div class="form-horizontal">

      </div>
    </div>
   </div>
 </div>

Css:

.top {
  width: 535px; 
  background: url('http://i.stack.imgur.com/WTrcf.png') no-repeat;
  padding-top: 55px;
}

.bottom {
  background: url('http://i.stack.imgur.com/65D0M.png') no-repeat bottom;
  padding-bottom: 55px;
}

.middle {
  background-image: url('http://i.stack.imgur.com/0N1JX.png');
  background-size: 100% 100%;
  overflow: auto;

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
  src='http://i.stack.imgur.com/0N1JX.png',
  sizingMethod='scale')\9;

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
  src='http://i.stack.imgur.com/0N1JX.png',
  sizingMethod='scale')"\9;

}

.form-horizontal {
  min-height: 400px;
  margin: 0;
  padding: 0 75px;
}

Images:

Alternatively, you could fix the height of .form-horizontal and set "overflow: auto" to simply force the form to scroll.

Any way to 'hack' Internet Explorer 10 to display border-image?

IE10 doesn't completely remove support for HTC behaviors. You can still use them if you force IE10 to emulate IE9, which you can do by adding the following meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

This would let you use CSS3 PIE's HTC behaviors again, but it would also prevent you from using other new features introduced in IE10. It's a tradeoff, but one that would allow your site to appear as intended in IE10 until such time as a better border-image polyfill is available.

Removing the image border in Chrome/IE9

Instead of border: none; or border: 0; in your CSS, you should have:

border-style: none;

You could also put this in the image tag like so:

<img src="blah" style="border-style: none;">

Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:

• Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
• If you want/need an <img> tag use Randy King's solution below
• Define an image src

How to fix IE rendering of border-radius combined with box-shadow?

The problem only occurs when the spread of the inset shadow triggers a larger "shadow-radius" than the size of the border-radius in IE. Set the border-radius to 50px in your example and it looks the same in IE and Chrome.

If you need a bigger box-shadow spread then you can just use a border instead, at least in your examples that would do the trick. Example: http://dabblet.com/gist/5501799

Another problem you might see is that IE and Chrome render the blur of the box-shadow totally different, but I assume you're not using it in your example for that reason...

Support for border-radius in IE

Yes! When IE9 is released in Jan 2011.

Let's say you want an even 15px on all four sides:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

Furthermore: don't forget to declare your IE coding is ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.

---

Related Topics