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 cavab
  • 49 have this problem
  • 1 view
  • Last reply by 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...

Modified by proxyy

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.