meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Border Imaging Redux

To follow up on my border-image post from Monday, it turns out that as currently written, border-image literally cannot take an image of a single symbol and repeat it around the border of an element.  Instead, you have to create an image with at least eight copies of the symbol in a 3×3 grid pattern.

Note that allowing a 3×3 grid pattern for border-image is potentially very useful, as it permits the creation of sophisticated border ‘frames’ with a single image.  The objection I have is that it’s required, even in simple cases like the one I described in the previous post.

The reason this 3×3 pattern is required is found in the description of border-image-slice, which states:

The regions given by the ‘border-image-slice‘ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.

That means that if you specify, for example, a slice distance of 100% (the default) then the top, bottom, and side portions of the border will be completely empty.  Only the corners will get the image.  The same thing will happen in any case where the sum of two slices along the same axis exceeds the dimension of the image along that same axis.  In other words, if the defined left and right slice distances add up to more than the width of the image, then both slices are made completely transparent.  Ditto for top, bottom, and height.

It seems to me that the easy way to make it possible to repeat a single-symbol image is to change that bit to instead say something along these lines:

The regions given by the ‘border-image-slice‘ values may overlap.  Values greater than the intrinsic dimensions of the image are “clipped” to the intrinsic dimensions of the image.  Values greater than 100% are treated as 100%.  Negative values are treated as 0.

Or maybe going beyond 100% or the image dimension means filling the remainder with transparency—I’m not sure yet which would be better.  I’d be interested to know if anyone has a compelling use case for the “fill transparent past 100%” behavior.

Anyway, when I raised the beginnings of this as a possibility on www-style, I was told that an “older and less mature” draft did exactly that, but it was at some point changed to the current behavior.  My inquiry as to the reasons for that change have so far been met with silence, so if necessary I’ll raise it again in a few days.

Commenters found that WebKit browsers can be made, with a very specific value pattern, be made to repeat a single-symbol image all the way around a border.  It turns out that’s only because WebKit implements the earlier version of the specification and it hasn’t since been updated.  Personally, I hope it retains its behavior (with improvements to make it less finicky) and the other rendering engines change to match it, not the other way around.  But to make that happen, I suspect the spec will need to be changed.  Here’s hoping.

Two Responses»

    • #1
    • Comment
    • Fri 28 Jan 2011
    • 1213
    Alan Gresley wrote in to say...

    I love the current WebKit behavior.

    This allows a repeated background all around the border.

    -webkit-border-image: url(images/border-3.png) 200 / 20px repeat;

    This allows a repeated background at the corners and bars at the top and bottom.

    -webkit-border-image: url(images/border-3.png) 200 / 20px;

    And this is done with a crude background which has had the center made transparent by my paint app rubber.

    • #2
    • Comment
    • Tue 1 Feb 2011
    • 1521
    Erik Mogensen wrote in to say...

    The acknowledgements of the CSS3 candidate recommendation lists Ian Hickson:

    A set of properties for border images was initially proposed by fantasai. The current simplification (one image cut into nine parts) is due to Ian Hickson. (Though the original idea seems to originate with some anonymous Microsoft engineers.)

    Way back in August 2004, fantasai suggested using multiple backgrounds too, in order to get the draft done quicker:

    The trouble with fancy borders is the difficulty of specifying them right and of implementing them. But most of what page authors are doing is using background images to achieve the effect, inserting extra elements to have the necessary frames to attach them to.

    So here’s an alternate proposal:

    - Leave image borders for a later draft.

    - Publish backgrounds and borders without image borders but *with a way of specifying multiple backgrounds on a single element*.

    It should be relatively easy to specify and to implement, and we’ll get the
    CSS3 backgrounds and borders properties out sooner, which is needed.

    And here we are, seven years on.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


January 2011
SMTWTFS
December February
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Sidestep

Feeds

Extras