1

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/

Voogd WD
  • 89
  • 8
Bart Burg
  • 4,786
  • 7
  • 52
  • 87
  • `-webkit-border-image:url(border.png) 30 30 round;` - Safari 5 - `-o-border-image:url(border.png) 30 30 round;` - Opera - `border-image:url(border.png) 30 30 round;` - Normal - Just some examples – Albzi Sep 26 '13 at 09:29
  • Well, it doesn't work in browsers other than Safari and Firefox 3.1 (Alpha). I'm searching for a solution to enable this on all browsers – Bart Burg Sep 26 '13 at 09:33

3 Answers3

5

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/

Voogd WD
  • 89
  • 8
  • +1. I've been using CSS3Pie for ages (and I'm a big fan of it) but I didn't realise they'd added `border-image` to it. That's a big help. – Spudley Sep 26 '13 at 09:42
  • 2
    However, I would say this: be careful of suggesting w3schools.com as a resource; it's got a really bad reputation around here. For browser support info, I recommend visiting http://CanIUse.com instead. – Spudley Sep 26 '13 at 09:43
  • I haven't looked into CSS3Pie but it seems worth the try. I will create a test project and test it in different browsers. If it works, I will update your answer! I, I, I ... – Bart Burg Sep 26 '13 at 09:46
  • @Spudley, thanks for the advice. I've changed it to caniuse.com – Voogd WD Sep 26 '13 at 09:53
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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
0

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>
Tiny Joy
  • 1
  • 1