CSS3 Border Images for Beautiful, Flexible Boxes

Notice: This is a discussion thread for comments about the SitePoint article, CSS3 Border Images for Beautiful, Flexible Boxes.

Have any of you used border-image on any of your sites or projects?

CSS3 is pretty amazing and so does html5 to pair it with but I specifically looking at south africa as a whole think people aren’t up to date with what happens and how. Most people i know are currently using browser versions that don’t support these new features

@Jay: yep, you understand correctly. (although it needn’t necessarily be tilable, you can also specify “stretch” and have it expand instead)

Cross browser issues aside:

I find it pretty simple. As far as borders go at least. As with anything else in CSS, you have to take it on a sliding scale (not talking about compatibility here, just possible uses).

If you expect this to be equal to something you can do in PS or AI, it’s going to fall short a bit. If what you cant is a custom pattern / texture EVEN width border… you will love it. If the border have uneven width corners, for example… you might have to resort to a trick or two… maybe even ad an extra tag to the mark up. If you want to put an uneven width border, with large corner elements ( transparent), with a gradient internal background on a fully scalable object … oh boy… you may be better off resorting to multiple bg images, or a combination border images AND bg images and perhaps even teh aforementioned container tag for your actual content.

Still in each case , comparing similar targets effects, it’s most certainly a lot less non-semantic HTML mark up than using CSS2. It’s not perfect; it’s an improvement. But an improvement is better than no improvement

Very good explanation, I hadn’t realized this was supported with CSS 3. Thanks!

No, no problem. To be honest with you, I think it’s very difficult to design flexible boxes that require the border-image property and yet are still attractive, that’s why I tried to come up with something simpler than the weird boxes that I’ve seen on other demos.


Sorry Louis, I didn’t mean to offend. Thanks for the demo.

Thanks so much for the article Louis. I’m still catching up on all the CSS3 stuff. This trick is good to know. And thanks for making the diagram. Helps a lot!

Interesting, so from what I understand it allows us to put like a 9-slice border around our images so when the image adjusts size the border can adjust and not mess up the corners or pattern, provided it’s tillable?

This is awesome. I was in the dark to how completely useful this feature can be. Thank you so much!

This will take some getting used to. Looking at how complicated it is, and how carefully you have to make your images in the first place… to tell the truth, my browser right now seems to support the border images, but not multiple background images. Well, I’m tempted to consider using this as a trick not for actual borders, but to simulate multiple background images (since, in my case, 99% of the time I want multiple images, it’s to sit in opposite corners of some box anyway).

I would have liked the article to explain a good way to create a fallback. Just declare regular borders first, then the newer ones for the browsers who support it in the same declaration?

There’s a typo:

You’ll notice that tthe lines that create the regions individually numbered. As these imaginary lines intersect, they create the nine areas into which the image will be sliced.

One thing to be careful of with this property is the result on the printed page. If a contiguous section runs over from one page to the next, the printed page will enclose the portion that appears on the first page, and then create another border for the portion that appears on the second page.

The twofold potential result of this, is that people might mistakenly believe the enclosed border on page 1 means that is the entirety of that section of text; and based on the layout of the border image, the border around the portion on page 2 will not enclose the text properly.

Beautiful? Butt-ugly :wink: The new properties are good though

Great article!

Doesn’t work in IE9 (32- or 64bit).

Well, the title’s reference to “beautiful” boxes was more about what the border-image property is capable of, not necessarily what the examples demonstrate.

The examples on the demo page are simpler than others that have been done, and are more for the purpose of demonstrating the practicality of the property. I think, however, that they’re more attractive and practical than some of those that have been demonstrated on other posts about this topic.

This makes a nice expandable coupon border in FF and Safari. One thing IE got right is the corners of dashed borders.
-moz-border-image:url(‘/images/coupon-border.png’) 18 18 18 18 round;
-webkit-border-image:url(‘/images/coupon-border.png’) 19 19 19 19 round;

I tried it in IE8, Firefox, Chrome, Opera and Safari for Windows. Anyone want to guess which one does not support this yet?

very good example i was looking for such kind of solution, will use it in my project.

As shown with IE8, even if they fix past bugs new ones come right up from the roots :slight_smile:

B-E-T-A. Remember all the crap IE8 was and wasn’t going to support back then?

I’ll give it til the Release Candidate. I rant enough about 6-8 as it is.