Can I get the CSS3 border-image to work on all modern browsers (IE 9+, Chrome and Firefox)?

Question

I want to use border-image for a fluid scaling CSS container. Is it possible to enable this CSS3 functionality on all modern browsers using some .js framework? If not, is there a good substitute?

For an example of what I want to achieve see: http://www.css3.info/preview/border-image/

Answer 1

The border-image property is not supported by IE, check: http://caniuse.com/border-image for browser support.

But, css3pie can make it possible for you to use a border-image in IE 6-9: http://css3pie.com/documentation/supported-css3-features/

Answer 2

The short answer is no, you can't.

border-image is not supported in IE9 or IE10. It is available in IE11, though.

Most other browsers do support it, but there are significant gaps -- notably the Android browswer, which doesn't support it in any version.

Most of the shiny new browser features that have been introduced in recent years can be back-ported into older browsers using a Javascript polyfill library. This has helped make it easier to start using a lot of these features, as developers could use the new feature without compromising their site too much for users of older browsers.

Unfortunately, border-image doesn't have any polyfills, so if you use it, you will just have to accept that users of IE<=10 and android users will not see your border image. Sorry.

Correction: It seems as if CSS3Pie has added polyfill support for border-image. That's really nice; I've always been a fan of CSS3Pie, but I wasn't aware that they'd added this feature. It does look as if it's not 100% feature-complete, but it's really nice to have.

You'll still have a problem with Android users, and a few other older browsers, but with CSS3Pie supporting it, the biggest barrier to using it has been removed. Nice one.

Refer to CanIUse to see a browser compatibility chart for this feature.

Answer 3

Try this code.This should serve the need for IE browsers:)

.borderImg{
background-image:linear-gradient(to left, rgb(255, 255, 255), rgb(221, 221, 221), rgb(221, 221, 221), rgb(255, 255, 255) 100%);
	background-repeat : no-repeat;
	background-size :600px 3px;
	background-position:bottom;	
 	padding-bottom:8px;
  width:100%;
  text-align:center;
  }

<div class="borderImg">
  Applying border
</div>