CODEWITHSUNDEEP
css
Andy Dwyer
Andy Dwyer

Reputation: 716

What's with border-left-image, border-right-image, border-top-image and border-bottom-image?

So, I'm one of those guys that prides himself on always using the most recent browser versions (except Internet Explorer of course - I don't speak about that browser).

I've come across this awesome CSS3 website that details the border-image property introduced in CSS3, including its expanded properties such as border-left-image, border-right-image, border-top-image, border-bottom-image and so forth.

As detailed here, this property is at least partially supported in most major browsers. So, all's good and well, right? Not so fast...

I'm able to get border-image to work as expected, but its expanded properties are not rendering. For example, border-right-image: url(border.png) 27 27 27 27 round round; ain't doing anythang in Firefox, Chrome, or Safari!

border-image is relatively documented on our Internets, but there is exceedingly limited (i.e. less than ten results) on any of the expanded properties.

Any insight here from our CSS3 gurus?

Upvotes: 3

Views: 6131

Answers (2)

BoltClock
BoltClock

Reputation: 723598

The expanded border-*-image properties no longer exist in the current spec, and haven't for a very long time.1 If any browsers still implement those properties, they are non-standard, and you should not expect them to gain cross-browser support.

For what it's worth, CSS3.info is extremely outdated and doesn't update nearly as much these days, so I don't use it for references anymore. The tables at http://caniuse.com always refer to the current specs as far as possible (with annotations for special cases), so you need to ensure that you're looking at the latest specifications when reviewing features, especially those that are in draft and have yet to be standardized.

1 The expansion of border-image to its individual sides was a very old idea in the Border module (which the above CSS3.info page links to!), which was merged with the Background module, all of which happened many years ago. The merger happened back in 2005, and that was when the expanded properties were dropped, leaving us with border-image and several other properties that don't pertain to box sides. Those properties haven't reappeared since; not even in Backgrounds and Borders level 4.

Upvotes: 6

Tony
Tony

Reputation: 4609

http://css-tricks.com/understanding-border-image/

See browser quirks. Also I dont see anywhere that says you can use the full properties on border-right-image do you?

Upvotes: 1

Related Questions