'border-image' confusion

Hello again,

    As I worked my way through understanding 'border-image' and 
related sub-properties-- which I mostly do now, I think-- I was 
massively hampered by an initial intuition that turned out to be 
completely wrong.  I raise it here because I doubt very much I'll be 
the only person so affected.
    I assumed, based on the name of the property and a general idea of 
what it was meant to do ("use an image for the element's border"), 
that I could take a single image and repeat it all the way around the 
border.  As an example, put stars around a div by using an image of a 
star.
    As it turns out, as most of you know, that's not possible.  You 
can get that end result, but only with an image that contains a 3x3 
grid of copies of the same star.
    Once I overcame my incorrect intuition, it was much easier to 
understand 'border-image'.  I had to realize that what I was working 
with was a sprite-sheet containing pieces of a border frame that CSS 
would slice up and then use the pieces to decorate the edges of the 
element.
    The point being that the simplest case of creating an image border 
(one image repeated) is not supported in a straightforward manner. 
In fact, it's not supported at all if you take "one image repeated" 
to mean "an image of a single glyph/icon/etc. repeated".  It is 
supported if you take it to mean "an image containing 8 copies of a 
single glyph/icon/etc. repeated" but that's not what most authors are 
going to assume when they first approach this property.
    In case that last assertion seems dubious, I put a 'border-image' 
scenario to the readers of meyerweb[1].  A number of them came up 
with the right answer but complained about the property being very 
counter-intuitive.  Others hacked around the problem entirely using 
other methods because they couldn't figure out how to do what I 
specified, or couldn't figure out how 'border-image' was supposed to 
work in the first place.  (And a couple of people got it to work in 
WebKit, but we're still not sure if that was a bug exploit or not.[2])
    It seems to me that this could be addressed in a couple of ways:

    1. Change the behavior of 'border-image-slice' so that if you 
specify '100%' (which is also the default) for an image, the whole 
image is used for each slice.  Similarly if you specify a number that 
equals the number of pixels in height/width of the image.  I can't 
see a good reason why it should behave as it does now, where slices 
get replaced with transparency if your slices exceed half the 
height/width of the base image.  Note that WebKit already does this, 
but other browsers do not.
    2. Change the property name to 'border-frame' or 
'border-image-frame', and the related sub-properties to match. 
(Credit for the 'frame' nomenclature goes to Peter Gasston[3].} 
Because that's more like what the properties do, at least as 
specified.  While I don't think this name would be immediately 
intuitive, it would be a lot less counter-intuitive: authors would be 
less likely to approach the property thinking, "Oh, cool, images for 
borders!  Let's run this star around this div!" and then be 
completely stumped by the resulting behavior.


[1] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/
[2] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/#comment-531046
[3] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/#comment-531023

-- 
Eric A. Meyer (eric@meyerweb.com)     http://meyerweb.com/

Received on Tuesday, 25 January 2011 15:09:04 UTC