Comments on: Border Imaging

By: El Paso Web Design

El Paso Web Design — Fri, 18 Feb 2011 11:04:02 +0000

Pretty neat effect, although I don’t want to endure the cross browser headache until *cough* IE at least displays CSS 2.0 decently ;)

By: Eric Meyer

Eric Meyer — Tue, 25 Jan 2011 15:14:06 +0000

After some further thinking, I've posted about this on www-style. We'll see if anything comes of it. Thanks to everyone who took a crack at this! Maybe I'll start a series called "Complexquiz".

By: Todd

Todd — Tue, 25 Jan 2011 14:17:47 +0000

When I tried using a 5×5 image, the corners would only show in FF 3.6.13 as well. Andy Clarke’s technique works well as was stated (Opera/IE9 – no). “Confused” is only one word I would describe how I am when dealing with border-image.

Something so simple, yet so confusing. Why bother having border-image when it could be simplified and renamed?

By: Louis

Louis — Tue, 25 Jan 2011 11:34:31 +0000

Germán,

Ah, pardon me. You’re referring to the difference in the longhand notation. In that case, you’re correct. I’m a little puzzled at why they’re doing that, but that’s another issue.

But again that raises the question: What should we use for the standard syntax? Good point,though…

By: Louis

Louis — Tue, 25 Jan 2011 11:31:39 +0000

Germán, yes technically you’re correct, but when you have something like “5 0 round” for Mozilla and “5 round” for WebKit, that is not very future-proof. What will you put in the standard syntax (the one with no prefix, that’s supposed to be listed last)?

Also, it should be noted here that “round”, AFAIK, is not supported by WebKit. WebKit treats “round” as “repeat”. “round” is supposed to prevent the repeated image from being clipped at the corners. In my testing, Firefox removes the clipping, but WebKit does not.

By: will

will — Tue, 25 Jan 2011 03:43:12 +0000

Awesome demonstration! Border images are an excellent addition to CSS.

For anyone trying to quickly achieve a dotted line around without having to worry about border madness, just use the “outline: ” property. I really think its a long-forgotten property, and slips right by internet explorer’s typical disasters.

By: Eric Meyer

Eric Meyer — Mon, 24 Jan 2011 23:53:46 +0000

Well in that case, Tab, we should dump border-image and its related properties entirely because we can do just about everything it does with multiple backgrounds, as Anton demonstrated. And anything we can't do could be addressed by adding just an extra property or two, not the six that border-image et al. require to do this very specific thing that can be accomplished by tweaking an existing solution. Right? Meantime, please don't accuse me of pretending things I'm not, because it needlessly lowers the quality of the discussion. I'm not pretending it's hard to create a 3x3 grid image. I'm saying that the property name makes it counterintuitive that you have to do that for this simple and likely common effect, and that even once you've gotten past that intuitive pothole it's a bit annoying to have to do it for simple cases that could literally be handled with a single property. Which, if it were, would most appropriately called border-image. (Well, given CSS naming conventions. I'd personally find image-border more appropriate but it'd violate long-standing naming patterns.)

By: Germán Martínez

Germán Martínez — Mon, 24 Jan 2011 23:18:27 +0000

Louis,

I’m not sure about that, we are using different syntaxes already:

-moz-border-radius-topright vs -webkit-border-top-right-radius

That’s the advantage of vendor specific prefixes. We can achieve the same results using different syntaxes.

Anyway, it was just an experiment ;)

By: Emma Dobrescu

Emma Dobrescu — Mon, 24 Jan 2011 23:05:18 +0000

I think the real problem is that it was planned/implemented as a stretching background image. I remember trying it when it was implemented and being peeved with the fact that by default it would set the middle part of that image as the element’s background. You have to plan it carefully and draw pixels and calculate, because the algorithm is not the same and whatever might repeat – err, pardon me – stretch beautifully in WebKit, has many chances to be mismatched in Gecko. It reminds me of the so many image workarounds that were used along the time for shadows, rounded corners etc. I’ll admit that it encourages creativity. But whoever found this logical for a border has a very twisted mind. I don’t expect it to work with the same code in all browsers(and why should I, they are different pieces of software), but at least one way to make it work for each of them? Without pushing pixels around?

By: Martin Sutherland

Martin Sutherland — Mon, 24 Jan 2011 23:00:35 +0000

Here’s an alternative, using generated content to create nested artificial block-level elements inside the original paragraph: http://sunpig.com/martin/code/2011/borderimage/index.html

Not quite what you were looking for, but it’s an amusing workaround. Works in FF, Chrome, Safari, and Opera; haven’t tried IE9.

By: Louis

Louis — Mon, 24 Jan 2011 22:57:57 +0000

Germán, that is quite interesting. The problem is, even if you were able to get it to work the same, it would be pointless unless the code was exactly the same for all browser.

One of the rendering engines is doing something wrong here, and the spec doesn’t seem to indicate which one (although I haven’t examined it in enough detail to say for certain).

By: Germán Martínez

Germán Martínez — Mon, 24 Jan 2011 22:31:44 +0000

Eric,

So far I have achieved to show the whole border in webkit but only two borders in Opera and FF (top & bottom or left & right).

Maybe that’s a start and someone with more experience than me can finish the work.
(there must be a way!)

Here’s the code:

section p {
padding: 5px 10px;

/* webkit: done */
-webkit-border-image: url(border-image-question.png) 5 round;

/* moz: ?? */
-moz-border-image: url(border-image-question.png) 5 0 round;

/* opera: ?? */
-o-border-image: url(border-image-question.png) 5 0 round;

border-image: url(border-image-question.png) 5 round;
border-width: 5px;
}

The code is here: http://martinez.pe/meyerchallenge/

By: Germán Martínez

Germán Martínez — Mon, 24 Jan 2011 21:38:48 +0000

You’re right Louis, that “100″ is not necessary.
I do think there must be a solution, but I guess it will be a hack.
I’m trying to achieve the same thing in FF4 and Opera, no luck so far :(

By: dominic

dominic — Mon, 24 Jan 2011 21:30:02 +0000

* replace “the most intuitive” with “immediately obvious”

By: Louis

Louis — Mon, 24 Jan 2011 21:28:02 +0000

Germán’s example will work with any value of 5 or higher for the offset (i.e. the “100″ that he’s using is not necessary — just use Chrome’s developer tools to change it on the fly to “5″ and it will not affect the output).

But the same code (with -moz) still does not work in Firefox (in my testing), so I don’t think that’s a solution.