We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

CSS border-image support seems to have been removed in 4RC

  • 5 ŋuɖoɖowo
  • 49 masɔmasɔ sia le wosi
  • 1 view
  • Nuɖoɖo mlɔetɔ cor-el

more options

I installed the 4 RC and now the CSS border-image styles I'm using don't seem to be supported. The borders look just like they do in IE9 and who whats that!? Before I upgraded my beta versoin border-image behaved like it does in Chrome

I installed the 4 RC and now the CSS border-image styles I'm using don't seem to be supported. The borders look just like they do in IE9 and who whats that!? Before I upgraded my beta versoin border-image behaved like it does in Chrome

All Replies (5)

more options
more options

@Topic: Stupidness of this move is just mind blowing...

@UP: Hay, its an old CSS reference (FF3.6 times). Its useless with FF4.

Example: Link: CSS3.info

Browsing with FF4 we see first two borders like orange double styled solid lines. Snapping with Firebug, we can't see ANY 'border-image' phrase. Next, and last, two borders are images showing how its going to be displayed.

Q: But there might be nothing about border-image in this demo! It might be fake, so FF4 is correct. A: Go ahead to the raw CSS file (link) and search for the '#border-image-1'. And what? We have 6 (six!) variants of implementing border-images and FF4 still gives a f*ck...

proxyy trɔe

more options

On the http://www.css3.info/preview/border-image/ it seems to be caused by the order of the CSS rules.
If I move the border: double orange 1em; rules to above the xxx-border-image rules then it works.
So apparently placing using border rule at the end disables all border rules (including the -moz-border-image that gets changed to none) that are placed above them. This might be expected and you should use specific rules (border -color, border-style, border-width etc.) in such an situation.

#left_column #border-image-1 {
margin: 0 30px;
width: 270px;
padding: 14px;
border: double orange 1em;
-o-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-icab-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-khtml-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-moz-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
-webkit-border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
border-image: url('/wp-content/uploads/2007/09/border.png') 27 round round;
}

#left_column #border-image-2 {
margin: 0 30px;
width: 270px;
padding: 14px;
border: double orange 1em;
-o-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-icab-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-khtml-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-moz-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
-webkit-border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
border-image: url('/wp-content/uploads/2007/09/border.png') 27 stretch stretch;
}
more options

Yay! One point for you cor-el. I didn't noticed that move by myself.

So, my last words about it are: WHY for god sake is that difference?! Why FF4 wants to mess up borders. Where's FF 3,6 border & border-image independence...

more options

The HMTL parser in Firefox 4 is much stricter than in previous Firefox 3 versions, so CSS that worked before might need attention and correction. Some older code is no longer supported and like in this situation there may be dependencies that were previously not present.