CSS3 Border Images

One gets a good illustration of the mixed state of the CSS3 implementation among the browser vendors by trying to implement such standards as Flex property or Border-Image standard. The Flex property is still in an amorphous state among the browser vendors and standards writers so that getting useful results is dubious.

In contrast, one can get some consistency in Border-Image results as seen below:

Be sure to try this in all of the major browsers
As can be seen, the border-image used and the amount of transparent area [the grey parts in the displayed images] has a profound impact on how the border is played out. There are 3 additional properties [ border-image-outset, border-image-slice, border-image-width] which also either do not play at all in the 5 major browser or diverge in their results. Here is the code for the example:

Designers may want to try their hand at styling their own border images. For some novel border imge results, check out the Mozilla Developers generator. And for the rules of the game, w3schools gets users well started on the basics. But until the browser vendors converge on implemetation, user’s border-image desiugn will be part alchemy.

Pin It on Pinterest

Share This